The progressive web app is the new trend as well as the need for the present time. I hope that before getting into the How part, you know what a PWA is. If you don't, let's say, just for the sake of a brief introduction, they are web apps but can also be installed over devices like desktops and mobiles.

I am adding a demonstration video of how PWA works here below.

So, by this video, I am assuming that you have understood how a PWA works.

How a make a PWA

let's come to the main question: how to do this?

Before getting into it, let me make one thing very clear to you. Making a PWA is not as hard as it seems to be. So, chill it will be fun

To make a PWA, you need three things. Listed below

Once these three things are done, you are good. So, without any further ado, let's get the show running.

manifest.json

Consider this file as the guide to tell the browser from where and what is to be taken. It's simple and easy to create. The sample code is below. Also, you can take all the code used in this tutorial from my git repo. link is at the end of the article.

{
     "short_name": "Short name of the application",
     "name": "Name of the application",
     "icons": [
         {
             "src": "/images/path/image.png",
             "type": "image/png",
             "sizes": "192x192"
         },
         {
             "src": "/images/path/image.png",
             "type": "image/png",
             "sizes": "512x512"
         }
     ],
     "start_url": "/",
     "background_color": "#ffffff",
     "display": "standalone",
     "scope": "/",
     "theme_color": "#e5e5e5"
 }

You can find all the details about all the attributes of manifest.json here. Once created, Add this to your ROOT DIRECTORY. In Case of LARAVEL, PUBLIC DIRECTORY.

In the next step, link this file to your HTML. adding in the LAYOUT is the best option for laravel

I have mentioned some other meta also, which will ease the creation process. After adding the manifest.json and linking it to the HTML, you will be able to see it in the application section of the Google development tool.

Checking for Audits

After adding the manifesto to the system, we will get all the audits to check. you can find the audit in your Google Chrome developers console. All you have to do is check the appropriate option and run the test.

In case any test fails, do not worry. Tests in the installable section are the only mandatory for the app to work. If the test fails in that section, get the suitable fixes. You can put the issue in the comment section. Maybe I could be of any help to you.

Service Worker

The last and final step of the process is to initiate and use the service worker. The process can roughly divided into two parts.

Adding the service worker

For adding the service container, add the below code in the file. 

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {   navigator.serviceWorker.register('/sw.js').then(function(registration) {
            console.log('ServiceWorker registration :', registration.scope);
        }).catch(function (error) {
            console.log('ServiceWorker registration failed:', errror);
        });
    });
}

This code is registering a sw.js, which means we have to create a sw.js that will serve as our service worker.

Special NOTE:

Please put service worker and manifest.json on the same level. It is highly recommended that you put both of them in the public directory. if they are not on the same level, the scope issue will be there.

Using the service worker

Once added now, we have to add the code in sw.js. Please add the following code in the sw.js. 

var CACHE_NAME = 'pwgen-cache-v1';

/**
 * The install event is fired when the registration succeeds.
 * After the install step, the browser tries to activate the service worker.
 * Generally, we cache static resources that allow the website to run offline
 */
self.addEventListener('install', async function () {
    const cache = await caches.open(CACHE_NAME);
    cache.addAll([
        'all files to be cached here'
    ])
});

self.addEventListener('fetch', function (event) {});

You can find a complete detailed explanation of the added install and fetch functions here

Now, for the final showdown, we have to call the prompt to add the app. To do that, we have to add the following code to the same file we have registered the service worker. 

window.addEventListener('beforeinstallprompt', saveBeforeInstallPromptEvent);

function saveBeforeInstallPromptEvent(evt) {
    deferredInstallPrompt = evt;
    deferredInstallPrompt.prompt();
}

The above code will make the prompt for adding the app. And congratulations mate. you got yourself a PWA.

In case of any doubt or query, feel free to ask in the comment section.