Progressive Web App with Angular 5

PWA or Progressive Web App is the buzzword in web development today. But what exactly is a PWA?

Well before we start with PWA a simple question. Have you ever seen a website that gets added to your home screen or desktop and can run as an application? If yes, then you have already experienced a PWA. If not, then maybe you should try out one of these and see how PWA works and behaves on mobile devices as well as a PC or laptop.

Probably you can start with visiting Angular website and add it to your home screen. Try it out and see how it looks like.

What is a PWA?

A PWA can be defined as a hybrid between mobile applications and the websites. What a PWA essentially does is to replicate the behavior of mobile apps, when the website is being viewed on mobile and give the same look and feel. That said, PWA has its own limitation over native apps and can't be considered as complete replacement for native apps.

Why to use a PWA?

There are a couple of reasons why it should be used.

1. Fast - Its fast. Normally a user would leave a website if it takes time to load. According to Google almost 53% of user abandon websites which takes more than 3 seconds to show up. Now if your website is loads lots of content and it consumes time then you can be pretty much sure that a significant amount of users are leaving your website even before it shows up.
2. Reliable - Have you ever been in situations where your Internet has ditched you? Bad networks? And in those situations what happen if you try to load up a website? Well PWA is here for rescue. PWA implements a "service worker" which can cache the data and instead of blank screens where the websites just try to load, you can show your users some content depending upon the amount of data that you are caching. If you can cache everything, maybe you can even provide a full offline experience.
3. Engaging - I'm pretty sure that most of the readers here are using Facebook, and each one of you use LinkedIn as well. On your mobiles, do you prefer to use the apps or the websites of LinkedIn and Facebook. Even if these websites are responsive and you still prefer app there must be a reason to do so. I'll let the readers figure out the reason for this, but in short you can say that people usually prefer to go with apps rather than websites. Now if your website can behave as an app won't you think people will feel it more engaging? Also if your website can trigger "push notifications" same as you see on native apps, won't it add to user experience?

PWA with Angular 5

Angular 5 comes in with a lots of tools to ease your PWA development. There are two ways to transform an Angular application into a PWA.

Before moving ahead I'd assume that you already have Angular setup done. If not, follow the angular guides to setup and get your device ready for development.

PWA in a new Angular application

To build a PWA from scratch you can run the following command

ng new MyFirstPWA --service-worker or using the alias -sw.

PWA in a existing Angular application

To transform an existing Angular application into a PWA follow the following steps

1. Run the command npm i --save @service-worker. This will install service worker in your application.
2. Run the command ng set apps.0.serviceWorker=true. This makes an entry in your .angular-cli.json file to get the service worker integrated.

3. In your app.module.ts (or your root module) paste the following line ServiceWorkerModule.register('/ngsw-worker.js',{enabled:environment.production})

4. You will also need to import the service worker in your root module. Add the line import { ServiceWorkerModule } from '@angular/service-worker' to import the service worker module.

5. Next you need to create a ngsw-config.json file in the src folder for your application. Paste the following lines in your ngsw-config.json file

{

"index": "/index.html",

"assetGroups": [{

"name": "app",

"installMode": "prefetch",

"resources": {

"files": [

"/favicon.ico",

"/index.html"

],

"versionedFiles": [

"/*.bundle.css",

"/*.bundle.js",

"/*.chunk.js"

]

}

}, {

"name": "assets",

"installMode": "lazy",

"updateMode": "prefetch",

"resources": {

"files": [

"/assets/**"

]

}

}]

}

ngsw-config.json file tells the service worker what it needs to cache.

This turns the application into a PWA.

Add to home screen

Now we will see how to enable add to home screen feature. To add to home screen you will need to create a manifest.json file for your application. To do so just visit https://tomitm.github.io/appmanifest/ and generate a manifest file. Once you download this manifest file you will also need an icon of at least 144px144px. Just to be sure add 3 icons of sizes 144x144, 192x192 and 512x512 pixels. Place your manifest file your src folder and then in angular-cli.json you will need to make an entry in the assets section. Add manifest.json in the assets section so that angular cli knows that it has to preserve manifest file as it is.

Then add in the icons in your assets folder and give relative path in manifest file to them. It should look like

"icons": [{

"src": "/assets/android-chrome-512x512.png",

"sizes": "512x512",

"type": "image/png"

},

{

"src": "/assets/android-chrome-192x192.png",

"sizes": "192x192",

"type": "image/png"

}

]

Once done include the manifest file in your index.html by adding the line <link rel="manifest" href="./manifest.json">

Now build your application by giving in command ng build --prod. Once the build is done and you get a dist folder, go inside dist and deploy it on a server. I use http server (npm i -g http-server) to do so. Once your application is deployed open it up in your chrome browser. Go to dev tools => application => manifest. there you will see add to home screen link. Click it and add your application to home screen.

In the next post I'll show how to enable notifications.

-Shashi