Quick Step-By-Step Guide to Convert your Project into PWA using Laravel

PWA with Laravel can transform your web application to behave like a mobile application, and still have all the functionalities like a website.

Progressive Web App development are a fairly recent trend in web and mobile app development. According to statistics, PWA can improve site performance by 63%, with an average loading speed of 2.75 seconds. Besides, it can increase the user engagement rate by 68% and website traffic by 65%.

Now, let us first get an insight into PWA before jumping onto the process.

What is PWA?

Progressive Web Applications (PWA) are software applications delivered through the web; coded using common programming languages like JavaScript, HTML, or CSS.

PWAs are web apps that look, feel, function, and behave like native apps. They render smoothly on all platforms: iOS, Android, Windows, Linux, etc., and on all devices: mobile, desktop, and tablet, within a standard compliant browser.

What Are the Benefits of Creating PWA Using the Laravel Framework?

With PWA’s high performance, fast loading speed, and code reusability; you can enjoy the fully featured framework of Laravel.

Furthermore, you can enjoy:

·         A pleasant UI on mobiles, desktops, and other devices

·         Your app gets launched in both online/offline modes.

·         Your app can send/receive push notifications even in offline mode

·         It has a large installation capacity

·         Consuming less space it can handle CPU-intensive workloads effortlessly

Objective: In this blog, we are giving you a comprehensive step-by-step guide that leads you to turn your project into PWA using Laravel

A Quick Step-By-Step Guide to Convert your App into PWA using Laravel

To convert your Laravel app into PWA, follow this quick guide. After completing the last step, you will have your PWA app ready, within a few minutes.

Step 1: Deploy Server

To initiate the process, deploy the Laravel development server. Make sure that you are not using NPM or BrowserSync. For deploying the server.

php artisan serve

NOTE: When you deploy the development server using NPM or BrowserSync, the PWA does not work. Because BrowserSync is using a virtual host. So, the manifest will register the virtual host whereas the service worker will register a different URL. As a result, it does not show the option for installation in the browser.

Step 2: Install the Composer Package

Install the Laravel PWA package. By doing this you complete half of the task.

composer require silviolleite/laravelpwa

Once installed, publish its assets and configuration file.

Php artisan vendor:publish –provider=”LaravelPWA\Providers\LaravelPWAServiceProvider”

In the configuration folder, you will find the ‘laravelpwa.php’ file. Make necessary changes in the app name (short & long), and colours to match the design palette.

  
 ‘XYZ’,

‘manifest’ => [

‘name’ => env(‘APP_NAME’, ‘MY PWA APP’),

‘short_name’ => ‘PWA’,

‘start_url’ => ‘/’,

‘background_color’ => ‘#00be9c’,

‘theme_color’ => ‘#1c3c50’,

‘display’ => ‘standalone’,

‘orientation’=> ‘any’,

‘icons’ => [

’72×72′ => ‘/images/icons/icon-72×72.png’,

‘96×96′ => ‘/images/icons/icon-96×96.png’,

‘128×128’ => ‘/images/icons/icon-128×128.png’,

‘144×144’ => ‘/images/icons/icon-144×144.png’,

‘152×152’ => ‘/images/icons/icon-152×152.png’,

‘192×192’ => ‘/images/icons/icon-192×192.png’,

‘384×384’ => ‘/images/icons/icon-384×384.png’,

‘512×512’ => ‘/images/icons/icon-512×512.png’

],

‘splash’ => [

‘640×1136’ => ‘/images/icons/splash-640×1136.png’,

‘750×1334’ => ‘/images/icons/splash-750×1334.png’,

‘828×1792’ => ‘/images/icons/splash-828×1792.png’,

‘1125×2436’ => ‘/images/icons/splash-1125×2436.png’,

‘1242×2208’ => ‘/images/icons/splash-1242×2208.png’,

‘1242×2688’ => ‘/images/icons/splash-1242×2688.png’,

‘1536×2048’ => ‘/images/icons/splash-1536×2048.png’,

‘1668×2224’ => ‘/images/icons/splash-1668×2224.png’,

‘1668×2388’ => ‘/images/icons/splash-1668×2388.png’,

‘2048×2732’ => ‘/images/icons/splash-2048×2732.png’,
],
‘custom’ => []
]

];

Step 3: Customize the images

In the same configuration file (above image), two arrays are representing the images: icons and splash. For normal operation of PWA, you need to customize them with your icons and splash. These images are published into the public folder with the path: ‘public/images/icons.’

You can specify the size for each icon as:

  
[

‘path’ => ‘/images/icons/icon-512×512.png’,

‘sizes’ => ‘512×512’,

‘purpose’ => ‘any’

],

Step 4: Include Blade directive

To make the assets available in the browser, you must include the Blade directive ‘@laravelPWA’ in the parent view layout. Always remember to do this before closing the head tag.

 App … @laravelPWA … @yield(‘content’) …

Step 5: Offline Route

What if there is a network failure? You must create an offline route to respond with a default view in case there is a network failure. For this, you must modify the Route files with path: routes/web.php, and add:

  
Route::get(‘/offline’, function () {

return view(‘modules/laravelpwa/offline’);

});

Step 6: Customize Service Worker

Here, you may worry about losing control, which can be avoided by using the importScripts option to include any custom logic that you need. Also, you can use any package that generates your service worker. Basically, service workers are necessary because they provide you with the exact requirement that you want. You can select your own set of libraries that will interact with the chosen database. And, once you have got the plugin installed, you can now customize the PWA-Laravel project.

However, there is also a default service provider code that can be implemented by any given app:

  
var staticCacheName = “pwa-v” + new Date().getTime();

var filesToCache = [

    ‘/offline’,

    ‘/css/app.css’,

    ‘/js/app.js’,

    ‘/images/icons/icon-72×72.png’,

    ‘/images/icons/icon-96×96.png’,

    ‘/images/icons/icon-128×128.png’,

    ‘/images/icons/icon-144×144.png’,

    ‘/images/icons/icon-152×152.png’,

    ‘/images/icons/icon-192×192.png’,

    ‘/images/icons/icon-384×384.png’,

    ‘/images/icons/icon-512×512.png’,

    ‘/images/icons/splash-640×1136.png’,

    ‘/images/icons/splash-750×1334.png’,

    ‘/images/icons/splash-1242×2208.png’,

    ‘/images/icons/splash-1125×2436.png’,

    ‘/images/icons/splash-828×1792.png’,

    ‘/images/icons/splash-1242×2688.png’,

    ‘/images/icons/splash-1536×2048.png’,

    ‘/images/icons/splash-1668×2224.png’,

    ‘/images/icons/splash-1668×2388.png’,

    ‘/images/icons/splash-2048×2732.png’

];

// Cache on install

self.addEventListener(“install”, event => {

    this.skipWaiting();

    event.waitUntil(

        caches.open(staticCacheName)

            .then(cache => {

                return cache.addAll(filesToCache);

            })

    )

});

// Clear cache on activate

self.addEventListener(‘activate’, event => {

    event.waitUntil(

        caches.keys().then(cacheNames => {

            return Promise.all(

                cacheNames

                    .filter(cacheName => (cacheName.startsWith(“pwa-“)))

                    .filter(cacheName => (cacheName !== staticCacheName))

                    .map(cacheName => caches.delete(cacheName))

            );

        })

    );

});

// Serve from Cache

self.addEventListener(“fetch”, event => {

    event.respondWith(

        caches.match(event.request)

            .then(response => {

                return response || fetch(event.request);

            })

            .catch(() => {

                return caches.match(‘offline’);

            })

    )

});

In case if you wish to customize the service worker functionality, you can update the following code

 public_path/serviceworker.js 

Step 7: Customize for offline view

While publishing the assets with the ‘vendor: publish’ command, you will come across a published Blade view with path: view folder/modules/laravelpwa/offline.blade.php.

Customize it accordingly so that it renders smoothly in the parent view layout (in which you put the ‘@laravelPWA’ directive).

Finally, HIT the Refresh button and enjoy your Laravel in the PWA app.

On installation, the device prompts to add the web app shortcut on the home screen. Once the app is launched and displayed on the home screen, it can be easily navigated without relying on the back/forward tab of the browser.

Conclusion

This is the quickest way to turn your project into PWA with Laravel. Within a few minutes, you get to see PWA coming into action with Laravel. And, your app starts behaving like a native app. In case you get stuck at any point in this process, you can always consider referring to web.dev documentation.

So, Good Luck! Let us know in the comment section how fast you build your PWA with Laravel.