Progressive Web Apps With Angular: Part 2

Overview

Here we are going to add PWA features to our application Contact Book which we created previously in PART 1 with Angular 7 . We added native features to application like splash screen, offline support and sharing data on any social media. Get a popup to add to Home screen when user sees your application from mobile device.

prog_image1

Install & add angular/pwa

In angular 7, we have a feature to generate PWA files automatically and all its dependency.
PWA version is 0.7.4.

Installed packages for tooling via npm.

The command generates all of the dependencies installed for PWA support, also create default service-worker config file, and default manifest.json file and even default icons for your splash screen and mobile home screen. You can edit these files as per your need.

Now you app is ready to be build.

Your app with service worker & manifest file is ready to deploy. Service worker cache CSS/SCSS, JS, assets and index.html file. It is only working for production builds because caching Javascript is not working in development mode, where live debugging might be needed.

iOS Support

For Android, it will take a support of manifest file but ios will not support manifest file. We have to add the following meta tag in index.html manually.

Inviting User To Install App

Invite the user to add our application to the home screen, we need the following code in app.component.ts.

Service Worker

According to Google,
“A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.”

For the earlier version of PWA, we need to add Service worker via npm module. For the newer version, it will automatically be installed. For configuration of a service worker, we have the ngsw-config.json file.

Offline Support

We need to give our application an offline support. The user can use even if there’s no internet connection. So for that, we need to add a new file in root folder ngsw-manifest.json. In this file, we will add routing for our application in JSON format for offline support.

Here, we will add external links which are users in our application.

Here, we will serve dynamic content & cache in our application.

Update UI When Network Status Change

Now we want to change UI when user goes online and offline for that we need to add the following code in app.component.ts.

Check Audit

First we need to create a build in production mode by ng build –prod. Then we can check out how our application is going on. All we need to do is open the Chrome DevTools move to Audits tab, where you can find a very powerful tool as Lighthouse— the best diagnostics of web pages. Now press Perform an Audit. it will take some time, then we will get some results. The result looks good. Here we can see the increased PWA score.

prog_image2

Conclusion

Finally, Our app is ready to work in mobile device as Progressive Web Application(PWA) with Angular 7.

See Live Demo: https://contactbookdemo.herokuapp.com/

mm

Pooja Ghetia Angular Developer

I am Angular Developer who works at Yudiz Solutions Pvt. Ltd. - a leading Web, Mobile Apps and Game Development company. I like writing blogs to share my knowledge and ideas with others. I'm always interested in learning about the latest technology.

Leave a Reply

Top