What are Progressive Web Apps(PWA) & How to implement PWA using Angular?

Progressive Web Apps are like websites…but better. It is a new way to deliver amazing mobile application capabilities using websites. PWA was introduced by Google in google IO 2016, since then it is talk of the town. In short they are applications that use modern web capabilities to provide mobile applications like experience to user via web. Still a relatively new concept to talk with many pros and cons…

Untitled.png

Progressive Web Apps are

  • Reliable: Service Workers enable PWA to load instantly, regardless of the network state. It will never show that awful dinosaur screen, even there is no network.
  • Fast: Application Shell will make it faster and provides smooth user experience.
  • Engaging: Manifest will make it more Engaging web apps. Manifest file will make PWA to installable and live on the user’s home screen. Even we can make them re-engage to user with the help of push notification.
  • Progressive: Work for every user, regardless of browser.
  • Safe: PWA Served via HTTPS to prevent snooping and ensure the security of content.
  • Linkable: it can be easily shared via URL.

Source Code and Demo Application :

Demo

Source Code

Implement PWA using Angular:

  • Ahead-of-Time(AOT) compilation:

    one way to make an Angular app load faster is to run its compiler under the AOT. i.e. the compiler only runs once during the build step only, the app does not need to compile when try to load it in browser.

With angular cli it is as simple as writing one command line statement.

ng build  - -prod  - -aot

And that’s it , now just run and check which will make your application 50% more faster and also reduce the bundle size to 45% . Isn’t it awesome guys!!!

  • Service Worker:

    It is an entirely separate script file which runs in background of your browser. We first need to register service worker before using it. We can do it so by simply putting below script on to index.html

This script will check if browser supports service worker or not. If it supports service worker it will register it.

Now we require service worker precache, which will generate service worker module. We can add sw-precache by simply writing

 npm install - - save-dev sw-precache

now in your package.json file add precache script.

And also add following file to root directory of you angular project and named it as sw-precache-config.js, which contains information about which files are to be cached.

Here I am caching all html,css and js files to dist folder because when we run the production build with angular cli ,it generates the compiled and minified bundled in dist directory which we deploy and host on server.

All done now, if we want to enable service worker, follow the following steps

  1. ng build – – prod – – aot
  2. npm run precache

here second step will generates serviceworker.js file in our dist directory.

Screenshot (176)

On First time load

Screenshot (177)

On Repeated Visit

  • App Manifest:

    We can give user add to home screen prompt to give user mobile application feel. To do so we only need to add json file inside our src directory. Before that we need to do some adjustment in index.html which is shown below.

 

<link rel=”manifest” href=”/manifest.json”>

 

And one more change in our .angular-cli.json file is as follow

 

“assets”: [

         “assets”,

“favicon.ico”,

“manifest.json”

],

 

and finally manifest.json

We can even add splash screen in manifest file also.

 

Screenshot_2017-04-25-19-42-55-0982308329Screenshot_2017-04-25-19-58-07-0122212804

 

Hope this article will be helpful to you.

Source courtesy:

https://developers.google.com/web/progressive-web-apps/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s