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.
- Register a Service Worker.
- Install a Service Worker.
- Update a Service Worker
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
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.
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.