Build Progressive Web App with Angular

PWA (progressive web apps) is simply an extra layer we can apply on top of our application. It’s not a new way to create an application but it enhances them. It allows us to work in offline mode as well as cache API responses in case user goes offline, application still has content to show. So, all of these done through a small thing called service workers. Service worker is a script that runs in a browser. It pulls in notifications as well as cache materials which enable users to works offline.

Another cool fact about PWA (At least for me !!) is it doesn’t look like you’re looking at a browser. It looks like an app. Plus you don’t get the typical browser controls, it’s just standard web application stuff. It’s kind of eerie because when you’re using it, it’s hard to tell the difference. Another compelling thing is it can be installed as an app on users home screen without having them download it manually through app store. PWA becomes vastly popular among modern application and some users even prefer PWA over native applications.

Now, let’s see how we can configure PWA to a Angular application. First, as always make sure you have the angular-cli installed. (type ng-v to check it). Now create a new project.

$ ng new pwa-app
$ cd pwa-app

Normally if we want to start a web server we use ng serve command. But ng serve does not work with service workers (at least for now). So we need to use a separate HTTP server to test our project locally. In here we gonna use http-server package from NPM. First, we need to build our project.

$ ng build --prod // Generate the distribution folder under 'dist' folder
$ cd dist/pwa-app // Go to dist folder
$ http-server -o // Run the web server, -o will open the browser

Now the application will run on your browser. Now click CTRL + SHIFT+ I to open up the application tab on chrome console.

Now Remember, we still haven’t added a PWA functionality to our project. if we tick the offline checkbox and refresh the page, browser will throw this.

In order to make this work offline, we need to add the PWA package to our project.

$ ng add @angular/pwa

This will generate some new files as well as update some. manifest.json is a JSON file which tells the browser about our web application and how it should behave when it ‘installed’ on the users smartphone or desktop.

{  
"name":"pwa-app", // name that appear in users smartphone
"short_name":"pwa-app",
"theme_color":"#1976d2", // theme for bar that go across top
"background_color":"#fafafa",
"display":"standalone",
"scope":"/",
"start_url":"/",
"icons":[
{
"src":"assets/icons/icon-72x72.png",
"sizes":"72x72",
"type":"image/png"
},
...
]
}

Cache API List

Now go to the ngsw-config.json file. Some people (including me) define this as the heart of the PWA. This allows us to control a variety of different things associated with PWA like cache API lists. We can add our API list under dataGroups property for caching.

"dataGroups":[  
{
"name": "my-url",
"urls": "http://my-sampe-url",
"cacheConfig": {
         "strategy": "freshness",  
"maxSize": 20,
"maxAge": "1hr"
}
}
]

There are two strategy types. One is freshness which checks API endpoint first and then fall back to the cache. Other one is performance which check cache first and then check API endpoint. maxSize is number of responses that service worker cache. maxAge determines how long cache value is valid.

Whenever we call http://my-sampe-url from our services, service worker intercept the request and according to “strategy” it will fetch the data from cache or endpoint.

Ok, we are now all set, once we run the application we can see that the service worker is already set up under application tab. If you tick the offline checkbox and refresh the page app still work since it’s loading from cache.

Conclusion

Dozens of major brands are moving from native apps to PWAs, and it’s easy to see why. Both mobile sites and native apps offer advantages and disadvantages, and PWAs are proving to be the best of both worlds for businesses. Bigger and better things await as this technology continues to develop.