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…
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 :
Implement PWA using Angular:
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!!!
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
- ng build – – prod – – aot
- npm run precache
here second step will generates serviceworker.js file in our dist directory.
On First time load
On Repeated Visit
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
and finally manifest.json
We can even add splash screen in manifest file also.
Hope this article will be helpful to you.