Progressive Web Apps : An introduction

The core idea behind building a PWA is to deliver the best user experience for normal web applications across all devices. When we access web apps through a browser, the overall experience never catches up with that offered by a native application. Hence, with the help of the available open web technologies, PWAs provide an augmented web experience for users who use the most modern version of their browsers on par with the OS dependent applications like android, iOS or windows.

What makes it so cool…

1. It can be accessed from any device having modern browsers.
2. It can be visited, shared and bookmarked like a normal website.
3. It works offline.
4. It can be installed just like any other native app with home screen shortcuts.
5. It can handle push notifications.
6. It can access the hardware features of the device like camera, Bluetooth etc.
7. While developing native apps, we need to maintain a single codebase for each platform but developing PWA demands only a single codebase. Hence, it reduces the maintainability.
8. Native apps constantly remind users of new updates. While PWAs automatically updates the content in the background with a simple page refresh.
9. By applying proper SEO techniques, PWAs can be indexed by search engines and hence can widen the app’s visibility.
10. Compared to native apps, the time required for developing PWAs is very less. Hence, it reduces the developmental cost by large folds.

Relevance

Pinterest’s website was old and had poor web performance. From analytics, they realized the difficulty in elevating the user base especially as the number of unauthenticated web users were large. Hence, after 3 months they rebuilt the existing web app using React and converted into a PWA which saw a massive growth in their business. They were also successful in reducing the bundle size of the web app which led to a drastic change in the CPU performance as well.

As a result, the time spent by users on the platform increased by 40% and the revenue generated by advertisements shot up to 44%.

Building blocks of a PWA

1. Responsive : Since PWA offers cross device compatibility, it must be responsive across all devices.
2. Service worker : This is a script file that asynchronously runs tasks in the background without compromising on the page performance.
3. HTTPS : since PWA requires a service worker, it must be hosted from HTTPS endpoint.
4. Manifest : This is a json file where we can include all the metadata associated with our app.

Let’s dig a little deeper…

Service worker

The service worker is responsible for ensuring that the PWA is reliable and independent of the network status.

It can access the cache from the client side and can store data such as static assets that don't need to be fetched over and over again like stylesheets, html, images etc. This enables the PWA to load only the necessary data during offline mode. It can thereby reduce the page loading latency and can improve the overall performance as well.

We can also enable the service worker to listen for events that occur during network changes and can serve, modify or intercept the network requests within the application in a dynamic manner.

In short, the two main features of a PWA such as the one time installation and caching is done using the service worker script. It can also be used to handle push notifications when the user is not using the website.

HTTPS

PWAs must be served with HTTPS protocol because of the following reasons :

1. Service worker demands an HTTPS connection.
2. Secures privacy of the user
3. Assures the authenticity of the content

Manifest file

This is a json file that contains all the necessary metadata regarding the PWA. This file also makes the PWA installable across devices. This metadata includes the title of our app, theme color, manner in which it should be displayed, adding logos etc. Once we have created the manifest.json file, we can link it in the head tag of our html file.

Summary

To sum up, PWAs have shortened the gap between web apps and native apps. Without a doubt, we can say that PWAs are the future of web apps. Now that many companies across the world are converting their web apps to PWAs assures the fact that it is going to be a path breaker in the software industry.