L Last updated on 19/11/18 P Progressive Web Apps

Check that you have node.js and Angular CLI installed. Input in your console:

node -v

If the command is recognized and you got node.js version go to the next step. If not, visit page: nodejs.org and install node.js (download proper version for your OS).

Check that you have node.js and Angular CLI installed. Input in your console:

ng version

Verify that you got following view (check if CLI version is not lower than 6)

If you need update Angular or install the newest version, use this command:

npm install -g @angular/cli

Create new Angular project using CLI. "pwa-ng" replace with your own app name.

ng new pwa-ng

After successfully initialized app change location to the created directory:

cd pwa-ng

It's a high time to apply PWA features and make your app progressive. Now we're going use my favourite because of Developer Experience Angular feature - Schematic. I will use the only one command to progressively enhance my app.

ng add @angular/pwa

Let's analyze what happened inside Angular project:

git status

As you can see at the following screen, Angular CLI has added and updated necessary files to make your app progressive:

Let's analyze what happened inside each file.

New files:

ngsw-config.json

This file includes instruction for the Angular CLI how to handle assets for caching.

app.webmanifest

Default app.webmanifest file added. Properties for displaying app and icons are set inside this file.

Changes to the existing files:

angular.json

Flag "serviceWorker" set to true. app.webmanifest added to assets.

index.html

app.webmanifest added to the head in index.html, theme color set, added information if javascript disabled on client side using noscript

app.module.json

ServiceWorkerModule imported and file with Angular's Service Worker configuration (ng-sw.js) registered.

package.json

Dependencies added to the package.json file.

Build your project before deployment:

ng build --prod

To test PWA and get 100% progressive app we need served our project via https. To do this we use super easy method - Firebase hosting.

Log in Firebase and create new project in Firebase Console. If you don't have and account, register.

Log to firebase locally using command line:

firebase login

Init Firebase Project locally. Set proper project name, function: hosting and directory with bundle created during building process (dist/pwa-ng).

firebase init

It's time to deploy your app. Let's do it!

firebase deploy

Run deployed project in a browser. If deploy process was successful you should have hosting URL. Let's run it!

Open application tab and check if app.webmanifest is added and Service Worker registered.

Check if your app can work Offline:

Run audit tests using Lighthouse. Open tools for Developers in Chrome, select tab 'Audit' and check Progressive Web App option. Run test and check the results.

Oh yeah! We got 100% Progressive Web App!

Celebration time! :)