Building a PWA with Angular 6

Everyone is talking about progressive web apps at this moment, I bet that you probably have heard something about them. They can defeat dragons, ride unicorns or be loaded at the speed of sound.

This article is focused on how to create a simple PWA application using Angular 6, but before this, let’s have a look to the main benefits that make PWAs so trendy.

• Unlinked to the stores. No need to publish them, sometimes it could be a tough and expensive task (specially in Apple´s case).
• No need to download them. You can install them directly from a browser prompt.
• App-like. A PWA act and feel like a native app, having access to some device functionalities like the camera.
• Offline mode and Web push notifications thanks to the service workers.

These features are making developers and companies invest time on creating PWAs. Specially in the case of ecommerce.

Angular 6. Yeah, it’s helping a lot!

The Angular team knows how important PWAs will become in the next years, so they want to make it easy for us. In the latest version of the framework there is a command which turn your project into a PWA.

Let’s go step by step, so first thing that we have to do is to install or upload to the latest version of angular-cli.

npm install -g @angular/cli

Then we are going to create a new project.

ng new myPwaApp

Finally, we serve the project:

cd myPwaApp
ng build

Now, our project is running in https://localhost:4200/with some default content. Actually, we don’t need to change much on this content.

Now, thanks to Angular 6, we can turn our project into a PWA just executing the following command:

ng add @angular/pwa

After publishing our App let’s have a look of what this command has done for us.

We can see that the @angular/service-worker have been added to our package.json. It also has created the manifest.json with our app data and the different sizes of the favicon.

The masnifest.json have been added to the index.html file.

It has also active the flag service worker to true in the angular.json file. This flag. This flag will cause the creation of a couple of files in the build for production.

. ngsw-worker.js

. ngsw.json

Theses files are the Angular Service Worker itself. The ngsw.json tells the service worker how it has to behave.

If we have a look at some lines of the code, we can see that the loading configuration of the PWA is set in this file. For example, the main js and css files are loaded in “prefetch” mode. This means that the app is going to load this content immediately when it is launched (for the first time).

On the other hand, the assets are going to be loaded on background. But only when the app is installed.

This file is also used by the service worker to know when a file has changed and has to update the app.

Finally it has added the ServiceWorkerModule to the app.module.ts and also register the service worker.

Publishing our App

Once we have saw how angular 6 become our project into a PWA, it’s time to publish it and know how it works. The service worker needs HTTPS to work properly. So, in my case the best option to publish the app is using Firebase Hosting. For this purpose, install the Firebase tools:

npm install -g firebase-tools

Login into your Firebase account:

firebase login

Create new Firebase project:

Initialize the project following the instructions of the Firebase CLI. (Don’t forget to choose the “hosting” service)

firebase init

Then add the Angular project into the public folder of the firebase project and modify the firebase.json to redirect your public folder to the correct path of the build of the project. I did it like this:

And finally we can deploy our project. With the flag “only hosting” it will only deploy our app without taking care of any other Firebase service we may be using.

firebase deploy --only hosting

Once deployed, we can access to our app, install it from the browser and check how it feels like a native app. You can check mine in this link:

Hosting URL: https://jose-ant-ruiz.firebaseapp.com

I will add more functionalities to the app in the future, like push notifications. Thanks for reading and stay tuned!