Adding the Progressive Web Application (PWA) to an Angular application

4 min readJan 4, 2022

Introduction

Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 14 and Google is the main maintainer of the project.

Progressive Web Application (PWA) is a hybrid application built with common WEB technologies such as HTML, CSS and JavaScript, that is, it works on computers and mobile phones compatible with the main browsers with the usability of a native mobile application.

@angular/pwa is a library with Angular service worker support that provides a user experience as if the application were designed to run on your operating system and hardware.

Prerequisites

Before you start, you need to install and configure the tools:

Getting started

Create the Angular application

1. Let’s create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format.

2. Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post Adding the Bootstrap CSS framework to an Angular application.

3. Add the @angular/pwd library to set up the Angular service worker.

Note:

The files ngsw-config.json, src/manifest.webmanifest and icons were added and the files angular.json, package.json, src/app/app.module.ts and src/index.html were changed to the application.

ngsw-config.json: Service worker configuration file allows you to configure cache strategy and files and other configurations.
src/manifest.webmanifest: Application configuration file or WEB app manifest file allows you to configure the name, colors, icons and other configurations.
angular.json: The service worker configuration was added.
package.json: The @angular/service-worker library was added.
src/app/app.module.ts: The service worker configuration was added.
src/index.html: Manifest file configuration and theme color was added.

4. Remove the contents of the AppComponent class from the src/app/app.component.ts file. Create the updateOnlineStatus method to check the browser connection status as below.

5. Remove the contents of the src/app/app.component.html file. Add the HTML code to display the browser connection status as below.

6. Run the application with the command below.

7. Access the URL http://localhost:4200/ and check if the application is working.

Angular Progressive Web Application (PWA) - Browser connection status

8. Change the contents of the AppComponent class from the src/app/app.component.ts file. Import the SwUpdate service and create the updateVersion and closeVersion methods to check for available updates for the application as below.

9. Change the contents of the src/app/app.component.html file. Add the HTML code to display if there are updates available for the application as below.

10. Access the URL http://localhost:4200/ and check if the application is working.

Angular Progressive Web Application (PWA) - Available update

11. Install the @angular/cdk library.

12. Change the contents of the AppComponent class from the src/app/app.component.ts file. Import the Platform service and create the loadModalPwa, addToHomeScreen and closePwa methods to check the operational system and the browser and display how to add the application as below.

13. Change the contents of the src/app/app.component.html file. Add the HTML code to display how to add the application as below.

14. Add the style in the src/app/app.component.scss file as below.

15. Ready! Access the URL http://localhost:4200/ and check if the application is working. See the application working on GitHub Pages and Stackblitz.

15.1. Android version.