Building Progressive Web App using Angular CLI in 5 minutes

From theory to action

In my last post I described the concept of Progressive Web Apps. Now it’s time to dive into the code to see PWA in action. We will use Angular CLI to build a simple Angular 5 application.

Step 1: Install/update Angular CLI

Before starting a new Angular CLI project we will need to install it. Assuming the NPM package manager (or any other) is already installed we simply need to execute the following command in the command line:

npm install -g @angular/cli

It’s always a good idea to check if currently installed Angular CLI version is up to date and update if it’s needed. The instruction how to do this is on the project GitHub page.

Step 2: New app

A new web application with service worker can be easily initialized using Angular CLI. To do this simply execute the command:

ng new mypwa --service-worker

cd mypwa

After a minute or two the app is created with service worker already in place. The template we used is installing and setting up an additional @angular/server-worker package which allows to include configurable service worker script to the application. The default Service Worker configuration is saved in src/ngsw-config.json file. To discover more options please check Angular Service Worker documentation.

Step 3: PWA manifest

The app generated by CLI is missing one important element to become Progressive Web App – the manifest. Let’s fix it by creating a file manifest.json in /assets catalog. It’s a good idea to use Web App Manifest Generator – an online tool helping to create a proper JSON structure for the manifest. Here’s the manifest I’ve generated and copied to my manifest file:

  "name": "MyPWA",
  "short_name": "My Progressive Web App",
  "lang": "pl",
  "start_url": "/",
  "display": "standalone"

We need also to make sure the manifest is referenced by the application. The manifest generator tool provides a set of tags needed to include to index.html page (inside of <head> tag):

<link rel="manifest" href="/assets/manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="My Progressive Web App">
<meta name="apple-mobile-web-app-title" content="My Progressive Web App">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Step 4: Build

The code is ready. Now it’s time to build it. In normal Angular CLI application you would use ng build command to do this. However, as the service worker package is configured to produce and attach a service worker only as the result of production build, we need to execute this command with prod flag:

ng build --prod

Build artifacts can be found in /dist folder.

Step 5: Test in web browser

To test the app locally we will need to run it on a local http server. We can use a Node http server:

npm install -g http-server
http-server dist

The app is running and we can see it by navigating to http://localhost:8080.

Note: localhost is the only exception in Service Workers restriction which says they can only be used on https page.

To prove the app is progressive you can use open Developer Tools (F12) in Google Chrome and choose Application tab. In Manifest section we can see the details provided in manifest.json file:

In Service Workers section we can also see the service worker is up and running.

Leave a Reply

Your email address will not be published. Required fields are marked *