Advantages of Progressive Web Apps and How to build them

It has been well over a year since PWA (Progressive Web Apps) started making rounds in the World Wide Web. There are more improvements that are coming in PWA’s and Browser Support is also looking good (but, please Safari do something!) - we think that PWA’s are awesome and we all of us are incorporating our products as PWA’s now! We recently converted our product UnderstandBetter as a PWA and saw a lot of improvement in in terms of it’s performance and user engagement. I’ll now explain how we go about making a PWA for a new product or for converting an existing product into a PWA.

As a developer I think that making a PWA is actually very simple, if we follow a few simple steps then we can easily make it - I’ll be listing out some of the main things to be done below,

Make sure you are in HTTPS

It’s way better for security and Service Workers need HTTPS to work - I’ll be explaining about Service Workers in a moment! So, without HTTPS you can’t possibly use PWA.

Adding a Manifest File

Once you are sure about HTTPS you can move on to adding a Manifest File. This Manifest File tells about all the meta information that will be needed for the PWA.

First you have to add the file to all of your HTML with a link tag like this,

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

This will link you to your manifest.json file which would be as follows,

1
{
2
  "name": "UnderstandBetter | AI for HR",
3
  "short_name": "UB",
4
  "icons": [
5
    {
6
      "src": "/img/ub-128x128.png",
7
      "type": "image/png",
8
      "sizes": "128x128"
9
    },
10
    {
11
      "src": "/img/ub-152x152.png",
12
      "type": "image/png",
13
      "sizes": "152x152"
14
    },
15
    {
16
      "src": "/img/ub-144x144.png",
17
      "type": "image/png",
18
      "sizes": "144x144"
19
    },
20
    {
21
      "src": "/img/ub-192x192.png",
22
      "type": "image/png",
23
      "sizes": "192x192"
24
    },
25
    {
26
      "src": "/img/ub-256x256.png",
27
      "type": "image/png",
28
      "sizes": "256x256"
29
    },
30
    {
31
      "src": "/img/ub-512x512.png",
32
      "type": "image/png",
33
      "sizes": "512x512"
34
    }
35
  ],
36
  "start_url": "/",
37
  "scope": "/",
38
  "display": "standalone",
39
  "orientation": "portrait",
40
  "background_color": "#673AB7",
41
  "theme_color": "#673AB7"
42
}

Everything about this file is clearly explained here . If you’ve completed all these steps you’re already halfway there!

And then come the Service Workers

I think that Service Workers are one of the greatest things to have happened in web development. It’s basically a simple Javascript file which installs a service worker that acts as an intermediate to the browser and network in which we can specify how certain requests to network should act and IoT can do much more .

To use this, you’ll have to install a Service worker file by doing this in all the HTML files,

1
if ('serviceWorker' in navigator) {
2
  window.addEventListener('load', function () {
3
    navigator.serviceWorker.register('/sw.js').then(
4
      function (registration) {
5
        // Registration was successful
6
        console.log(
7
          'ServiceWorker registration successful with scope: ',
8
          registration.scope
9
        )
10
      },
11
      function (err) {
12
        // registration failed :(
13
        console.log('ServiceWorker registration failed: ', err)
14
      }
15
    )
16
  })
17
}

And in the sw.js file we can do this,

1
self.addEventListener('install', event => {
2
  // Do install stuff
3
})
4

5
self.addEventListener('activate', event => {
6
  // Do activate stuff: This will come later on.
7
})

In here we can basically do any of the network related stuff as per our wish, here are some of the best places to get started,

1. Service Workers: an Introduction
2. Service workers explained
3. Caching with service workers, the easy way
4. Making a Simple Site Work Offline with ServiceWorker

Annnd we’re offline!

We’ve written another excellent article about all the process of making everything offline. You can find it right here .

Lighthouse to the save

Now, this might be random and out of nowhere but I think that this is the best C hrome extension ever invented by mankind! It analyses your web page and gives a comprehensive result of how it can be improved with analytics and stuff - so be sure to check it out!

Well, for now, I guess that that’s it! To make sure that everything is light years ahead - that’s the most important point when it comes to creating a PWA. So let’s create some awesome Web Apps today!