Progressive Web App(PWA)

A PWA or a progressive web application is simply a website that can be installed on any device i.e android, iphone, desktop etc. It is just a responsive website that can be easily installed on a single click with some great powers.

Advantages of a PWA:

• Small size (mostly in kbs)
• Easy to install
• Offline support
• Not dependable on OS
• Features of native application(mostly)
• Push Notifications
• No overhead of updation(updates itself in background)

We can simply call PWA, a hybrid application/website that can be installed on any device or can even be submitted to play store(TWA).

Manifest.json:

It is a file that the browser parses and provide the application/pwa with certain name and also give some icon to your application after it is installed and also it have some advanced features like whether the app should be running standalone or with that url bar on top, different size icons for different screens, shortcut actions etc.

Just link the manifest file to the html file in the head tag like this:

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

Your manifest file looks something like this:

You can add more to your manifest file, just have a look here:

Add a web app manifest

For icon generation, I have used this tool:

PWA Application Icon Generator Free Online Tool

Service Workers:

The heart of a PWA is it’s service worker that enables it to provide app like functionality and keep track of everything from the manifest file to the background services, updation, catching, fetching and everything.

A service worker is just a js file that can be easily created and you just need to create some functions/methods to make it work. I’ll be explaining them in the later part.

Lifecycles of a Service Worker:

• Registering
• Installing
• Activating
• Updating

If we update anything in the sw.js file, then the service worker will be installed again and it will become active only when all it’s instances are closed in order to not create any interruption in the user’s work.

Registering a SW:

Registering a sw is as simple as just writing 4 lines of code in your main js file.

The code looks something like this:

service worker registration

Installing a SW:

Installing a service worker is also as simple as registering it. Write this code in the sw.js file and the code looks something like this:

self.addEventListener('install',(evt)=>{
    console.log("sw installed",evt)
})

Activating a SW:

Activating a swrvice worker to listen to events and everything is also quite simple like just adding one more event listener like this:

self.addEventListener('activate',(evt)=>{
    console.log("sw activated",evt)
})

OFFLINE SUPPORT

PWA provides you the power of making your app work offline or show some other content while offline. All of these is possible due to caching. Caching is basically storing the assets on the browser storage and whenever the connection goes off or app becomes offline, fetching the files from the cache.

This can be understood by looking at a simple diagram:

CACHING:

Caching is a strategy to store the assets i.e. HTML, CSS, js, images and other files on the user’s browser storage. We can cache our assets anywhere in he sw file but if we think logically, we should use the install event to cache our assets because that is something we don’t need to do every time. We can just cache resources once and we are good to go. The caching code looks something like this:

Fetching Files from cache:

We have successfully cached the resources, so our next step would be to get those resources from the cache directly rather than using user’s net again and again. So to do that, we just need to add one more event listener i.e. fetch event and check if the requested resource is in the cache or not and if it is in the cache fetch it from the cache directly before performing network call.

The fetching looks something like this:

Now, it causes an issue like when developing the app, there will be cases where you will be updating the files that you have saved in your cache, but you won’t be seeing any effect because the resources are fetched from the cache so we need to create a mechanism that deletes the previous cache and caches the assets again so this can be achieved by checking the cache version every time we refresh i.e. we can use the activate event of sw.

Deleting older versions of cache:

The code of checking the cache and deleting previous versions looks something like this:

Displaying the offline page from cache if network is not there:

Showing a fallback html page or any image is very simple. Just check in the fetch event whether it’s possible to fetch from network, if both is not possible then show the fallback page stored in the cache of browser. The code will look something like this:

self.addEventListener('fetch',(evt)=>{
    evt.respondWith(
        caches.match(evt.request)
        .then((cacheResponse)=>{
            return cacheResponse || fetch(evt.request)
        })
        .catch(()=>{
            return caches.open(cache_version).then((cache)=>{
                return cache.match('/fallback.html')
               })
           })
      )
})

Dynamic Caching and Notifications and other features are not in the scope of this blog, I will be including all of these in my next blog.

The tutorial PWA can be installed from the link here:

Dikshant rajput's PWA

All the code related to this tutorial will be found here:

GitHub - dikshantrajput/pwa-medium-tutorial

If you guys like this blog, don’t forget to hit that clap icon and follow me for more such content over web technologies. Stay safe and happy :)