Progressive Web App (PWA)

Hashedin

Gaurav Raj

26 Aug 2020

Progressive web application is a software built using common web technologies like HTML, CSS, and javascript, which intends to run on any platform that has a standard browser. It offers functionalities such as working offline, push notification, device hardware access, etc to create a native application like experience. They make a web application act and feel like an app by applying different technologies. Using progressive enhancement, new capabilities are enabled in modern browsers and this is achieved by employing web app manifest files and service workers. Using those technologies, a PWA can close the gap between a classic web application and a desktop, or native mobile application.

 

This article talks about how we can enable the PWA feature to make our app installable i.e. add an app to the home screen with caching files such as CSS, js, and data response for a Native app-like experience.

 

To enhance a classic web application with PWA features, two essential building blocks must be added to the application, a web app manifest file and a service worker. Let’s look into the purpose of these two elements.

 

Web App Manifest
 
The purpose of the web app manifest file is to provide information about the web application. The JSON structure of that file can contain information such as name, display, icons, and description. This information is used to install the web application to the home screen of a device that helps the user to access the application conveniently, with overall app-like experience.

 

Web application manifest file (https://www.w3.org/TR/appmanifest/), we have added a reference to the file in index.html file and the file itself with desired properties.
 
After addingWeb App manifest file, it is mandatory to add a service worker to our application as well.
 

 


 

Service Worker
 

A service worker is a JavaScript file that is added to the project and registered in the browser. The service worker script has the capability to run in the background and perform tasks like push notifications and background sync. To use this API we need to follow three steps :

  1. Register a Service Worker.
  2. Install a Service Worker.
  3. Update a Service Worker

Typically, this can be achieved by writing javascript code and listening to events like download, install, and fetch. But to simplify our job, some steps are used to let it run with just a CLI command.
 
Steps To Add Service Worker in Angular App
 
To set up the Angular service worker in a project, use CLI command ng add @angular/pwa i.e.
 

 running the above command completes the following:

1. Adds the @angular/service-worker package to your project.
 

 

2. Enables service workers to build support in CLI.
3. Imports and registers service workers in the app module.
 

 
4. Updates index.html file to include manifest.webmanifest file.
5. Creates the service worker config file “ngsw-config.json” to get the detailed description of properties  


visit https://angular.io/guide/service-worker-config

 

 
After the set-up is complete, we structure the “SW-master.js”, which is mentioned in the app.module.This file contains the script that will be generated while building the app in production mode.
 

 
This completes the framework of service workers, and our app is now satisfactory for PWA. The app caches all the files mentioned in “ngsw-config.json” under the asset group and data group. Wondering where it stores all the cached assets? Your origin (domain name) is given a certain amount of free space that is shared between all origin storage i.e. Local storage, IndexedDB, and Cache. The amount available to service workers isn’t specified, but rest assured that space is enough to make the site work offline.
 
But for a matter of fact, it doesn’t automatically update the app when a new feature is added. To address this issue, the service worker module provides a few services that can be implemented to interact with service workers and control the caching of the app.
 
The SW update service gives us access to the events when there is an available update for the app. This service can be utilized to constantly check for updates so that the app can track the latest changes and reload to apply the same.
 
This action can be done at various stages of an app. For simplicity, we did this in the “app.component.ts” file in the OnInit lifecycle hook.
 

 
The above piece of code creates an instance of SW update API and checks for any available update as soon as the app starts. If there is any update, it prompts the user about the same. 
 
Summary
 
It can be concluded that by adding manifest files and enabling service workers with a few simple steps, we configured our app to behave like a native application. But this doesn’t eliminate the need for native applications, as some capabilities are still out of the web’s reach. The new and upcoming APIs are looking to change that and these capabilities are built with the web’s secure, user-centric permission model ensuring that going to a website is not a scary proposition for users.
 
To check the app in action, visit https://tractorbazar.com/, and click on the ‘add app’ option. It can be noticed that the size of the app is added as a native app, and it is still light-weight.
 
Installed Progressive Web Apps run in a standalone window instead of a browser tab. They’re launchable from the user’s home screen, taskbar, or shelf. It’s possible to search for them on a device and jump between them with the app switcher, making them feel like part of the device they’re installed in. 

 

Using the latest web features to bring native-like capabilities and reliability, Progressive Web Apps allows, what you build, to be installed by anyone, anywhere, on any device with a single codebase and lightweight.

 


Have a question?

Need Technology advice?

Connect

+1 669 253 9011

contact@hashedin.com

linkedIn youtube