Start codelab

Codelab Flow

Install dependencies

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: 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

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

Apply PWA features using a Schematic

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:

Analyze applied changes

Let's analyze what happened inside each file.

New files:


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


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

Changes to the existing files:


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


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


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


Dependencies added to the package.json file.

Build Angular app

Build your project before deployment:

ng build --prod

Create Firebase project

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

Deploy your app

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.

Test your PWA

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! :)