How to turn a website or web application into PWA with example

February 9, 2022

Introduction

PWA stands for Progressive Web App. Progressive Web Apps are installable web applications that are used for a fast web experience on your computer or mobile device. A progressive web application is a type of web application that can be built using web development technologies like HTML, CSS, and JavaScript. It can be run on any platform. (For example Google Chat, etc.)

It works offline if the network is down. We have cached some of our core static resources like HTML and CSS so the application is available, and once the network comes back online we can continue to use the application.

Basic Requirements:

PWA must run over HTTPS (or localhost),
It has a manifest.json file,
It has a server worker (for installability, fetch requests and it’s also going to allow you to use your resources and perform various different background tasks)
Your application should be responsive and smooth.

Launching your first PWA application:

Step 1: Create an index.html file or you can work with your existing web application project.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>PWA</title>
  </head>
    <body>
        <h1>Hi, Welcome..!</h1>
    </body>
</html>

Step 2: Create a manifest.json file in the root folder for app configuration.

{
  "name": "PWA-App", // installation name
  "short_name": "PWA", // app title name
  "start_url": ".",
  "theme_color": "#4287f5",
  "background_color": "#ffffff",
  "display": "standalone",
  "icons":[
    {
      "src":"images/logo192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src":"images/logo512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]

}

Note: You need two logos the size of 192×192 and 512×512.

Step 3: Link manifest.json file to the main page, in our case in the index.html file.

<link rel="manifest" href="manifest.json">

You can verify your manifest.json successfully link with your application by usingInspect, Open inspect mode using Ctrl+Shift+I, navigate to Applicationin that you find your manifest.json configuration if everything went well.

Step 4: Create a javascript file name as index.js for registering the service worker to the application.

if("serviceWorker" in navigator){
    navigator.serviceWorker.register("service_worker.js").then(registration=>{
      console.log("SW Registered!");
    }).catch(error=>{
      console.log("SW Registration Failed");
    });
}else{
  console.log("Not supported");
}

Step 5: Now, create a service_worker.js file in the root folder.

// Cached core static resources 
self.addEventListener("install",e=>{
  e.waitUntil(
    caches.open("static").then(cache=>{
      return cache.addAll(["./",'./images/logo192.png']);
    })
  );
});

// Fatch resources
self.addEventListener("fetch",e=>{
  e.respondWith(
    caches.match(e.request).then(response=>{
      return response||fetch(e.request);
    })
  );
});

Step 6: Add index.js script to the main page, in our case in the index.html file.

<script src="index.js"></script>

So finally our index.html file looks like:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>PWA</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<h1>Hi, Welcome..!</h1>
<script src="index.js"></script>
</body>
</html>

Once we added index.js to our main page, we find an installation icon on the right side in the search bar: