How to Turn Your Angular App into a Progressive Web App
By Engineering Team January 29, 2019 10 mins read
In this article you will learn about Progressive Web Applications (PWA), particularly the process to convert your Angular app into a PWA. PWA is an option used to make regular web applications act like native apps on Android, Windows, Chrome OS and more. Progressive Web Apps are not a new technology, but lately, they are getting much more attention after Microsoft announced they are supported by Windows. They are also available in Chrome, Firefox, and Safari.
What Does PWA Mean?
Progressive Web Application refers to a set of characteristics implemented by actual applications that allow you to improve the user experience.
Let’s review each characteristic:
- Application Manifest: A manifest is a json file that describes the settings of the application such as author, description icon, start screen, etc.
- Service Workers: Using Service Workers allows you to improve the load time of the app by using different caching strategies for assets, and even API requests.
To fulfill all these requirements Angular allows us to create a PWA from scratch, in a fast and easy way. Let’s review the simple steps to make it happen.
Step 1: Angular CLI Set Up
Angular CLI is the standard command line tool used to create, debug and publish Angular applications. The easiest way to transform your app into a PWA is by using Angular CLI.
npm install -g @angular/cli
Once you have it installed you can create your new project with:
ng new AngularPWA
There is nothing new about this, you’ve probably done it in the past. You have just created a new Angular application with the help of the Angular Command Line Interface.
Step 2: Add Service Workers
Inside your current app directory (/AngularPWA) run the following command:
ng add @angular/pwa.
As a result, this command adds two files to our project, ngsw-config.json and manifest.json both required to transform our app into PWA. It also modifies the angular.json file adding the value “serviceWorker”: true. The index.html of our app now includes a reference to the manifest.json.
<link rel="manifest" href="manifest.json">
These updates are necessary, they allow the browser to consider the app as a PWA.
Here is a description of each one of these files:
- ngsw-config.json: This is the configuration file for the service worker. It is used to configure the different caching strategies.
- manifest.json: This is the PWA manifest. Basically, the file generated with all of the app resources (for example icon, name, theme, etc.)
Filling The Manifest
The manifest file contains the metadata of the application and is used when you install the PWA. It is also used for displaying the splash screen.
Here you will find a description of some of the most important fields:
- name: Displayed on the splash-screen below the app icon.
- short_name: Displayed below the shortcut on the desktop or on the home screen.
- theme_color: The general theme color of the application, used in the status bars if they are displayed.
- background_color: The background color of the splash screen.
- display: Specifies the display mode.
- standalone: In this mode some browser components (for example UI elements for controlling navigation) are excluded and the application takes the whole screen. This makes the screen look and feel similar to a standalone application.
- icons: Array of icons in different sizes for each of the supported resolutions.
Here is a sample manifest file:
After filling the manifest you can configure the service worker.
Configuring The Service Worker
Angular provides the file to configure service workers rather than coding it on your own.
As described before, the ngsw-config.json file has all the defined configuration for the service worker and it is used to configure the different caching strategies.
This file, like the manifest, is also a JSON object and has four entries, described here:
- index: Index page for navigation requests. Usually index.html.
- assetsGroups: Specifies the resources files that are part of the app. Here you can also define the policy by which they are cached. For example:
Resources that are always cached (“installMode”: “prefetch”)
Resources cached when loaded (“installMode”: “lazy”)
- dataGroups: refers to the resources that are obtained by data requests and are not part of the app itself. The two different strategies: cache first with network fallback (“strategy”: “performance”) and network first with cache fallback (“strategy”: “freshness”)
- appData: Allows to pass data that describes the current version of the app.
Testing The Resulting App
To see if everything is working and to make your app working run the command:
ng build --prod
Basically, it generates the dist folder, nothing rare about that, but pay attention to these three files:
- manifest.json and ngsw-worker.js: were already described before.
- worker-basic.js.: this script enables the usage of the service worker.
These files are the ones that allow you to run your app with service workers enabled.
Run a local server to preview your app. In this case, I’m using http-server, and open the Application tab of the browser web developer tools.
Now you can see that the service worker is active and working.
Check the offline option and reload the browser. By opening the Network tab you can see that the files are being cached correctly.
Quite simple, right? Now you have your Angular PWA application running.
You now have seen how to add PWA features to your Angular application. PWA applications allow you to expand your web page app to a whole new market and in doing so, to obtain more users. You can improve the user experience since your app resembles a native app and all of this facilitated by the usage of Angular tools. We hope you’re able to move on a step forward in the development of your first PWA with Angular.