Introduction To PWA and How To Implement It

In today’s life, technologies are growing day by day. If we look, we would find new technology having some new advanced and helpful features come daily. It doesn’t mean that we would be getting in trouble if we are a developer, but it’s mean that our workload became the light from previous days, because all technologies creator always bears in mind that the development would be easier and output would be more attractive. So here, we would talk about the PWA technology.

What is PWA?

PWA basically stands for the Progressive Web App. It is a mobile app which is delivered through the web. It is built-in with common web technologies like HTML, CSS, and JavaScript.

They can be implemented on any app which uses the standard-compliant browser. It is enabling the user experience similar to the native application on a mobile device. It includes work offline, Push notification and device hardware access.

How to implement the PWA in our web app?

For Implement PWA basically we need the most two important file:

1. Manifest
2. Service worker

Manifest: The manifest file is basically a JSON file having extension .json (manifest.json). This file contains all the information about the behavior of app i.e how it would look and behave during installation and run. When we open the web app in our mobile screen browser it would show the popup for Add to the home screen.

Let’s see a created manifest JSON file dummy created by google developer website

 {  
  "short_name": "Maps",  
  "name": "Google Maps",  
  "icons": [  
   {  
    "src": "/images/icons-192.png",  
    "type": "image/png",  
    "sizes": "192x192"  
   },  
   {  
    "src": "/images/icons-512.png",  
    "type": "image/png",  
    "sizes": "512x512"  
   }  
  ],  
  "start_url": "/maps/?source=pwa",  
  "background_color": "#3367D6",  
  "display": "standalone",  
  "scope": "/maps/",  
  "theme_color": "#3367D6"  
 }  

Here Short name and name is used to show the name whenever the app would be launch in the device. Icons would be shown during the app launch and also for identification of app in-app gallery of the device.

Same as the background color functionality which would show during the standalone.

Basically, PWA stores data in the cache and retrieve data from the cache. Start_url is the app start URL screen which show after the app launch.

For link, the manifest JSON file uses the below expression.

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

Include this file in your app header.

Service worker

Service worker file is a javascript file which runs separately from the main browser thread and it intercepting the request. It caching and retrieving the data from the cache and deliver to the app.

A service worker is an independent file, we cannot use local storage in this file. It gets the push notification from the server when the app is offline. It is used for asynchronous data transmission.

Service worker lifecycle

In service worker life cycle there are mainly three steps

1. Registration
2. Installation
3.  Activation

Registration

 if ('serviceWorker' in navigator) {  
  navigator.serviceWorker.register('/service-worker.js')  
  .then(function(registration) {  
   console.log('Registration successful, scope is:', registration.scope);  
  })  
  .catch(function(error) {  
   console.log('Service worker registration failed, error:', error);  
  });  
 }  

When you add the service-worker.in in the root file directory then you can check and the register in the main.js file directory. From here we would get the request and response over these request.

In this code first, we check the service worker file from the navigator object then register it. The scope of the service worker would determine which file of the folder would service worker control. We can also set arbitrary scope from the main.js file.

 navigator.serviceWorker.register('/service-worker.js', {  
  scope: '/app/'  
 });  

Installation

After register the service worker we can make the further process. So let’s start with the installation

Service-worker.js

 // Listen for install event, set callback  
 self.addEventListener('install', function(event) {  
   // Perform some task  
 });  

Activation

After installation, we are going to do the activation.

 self.addEventListener('activate', function(event) { 

  // Perform some task 

 }) 

After activation, we can check the PWA functionality by open the app in mobile browser or we can also check by Google Chrome debugger tool with the help of the application tab

Conclusion

In this overall post, we found that nothing is more difficult in any part of code even the code also not much longer. But our output is more attractive and very helpful for the developer as well as end-users. The PWA just have the few steps of implementation and then our web app would start to work as a native app.