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:

Your manifest file looks something like this:

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

For icon generation, I have used this 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:

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:

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:

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:

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:

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

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 :)

--

--

--

WEB LEARNER | WEB3 Enthusiast

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

ReactJS —Hook Short

Publish Angular App on Firebase — Express Mode

Functions on Functions on Functions

Javascript: The .map() Array Method

Hot Module Replacement with angular/cli

React JS with Apache Thrift API

Animate On Scroll in Angular, React or Vue.js

Integrating Axios with React Hooks

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dikshant Rajput

Dikshant Rajput

WEB LEARNER | WEB3 Enthusiast

More from Medium

Web Development — Front-end, Back-end or Full Stack???

Cloning of Expedia Website

Insert an dynamic HTML signature to web applications

Playing with Particles.js