Progressive Web Apps Are Coming

Progressive Web Apps Are Coming

 

What is Progressive Web App ?

In simple language, A Website/Webpage which is mobile friendly and behaves like a mobile app.

Google Dev. website gives its definition like this : A Progressive Web App uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, leveraging the web's low friction. Progressive web app is new dawn in web applications. As you land on this blog,I assume that you may have basic knowledge of PWA, If not then visit this links. visit here.

Create your first PWA

We will start building our first basic PWA. 

The necessary ingredients of this recipe are : 
1. Https enabled hosting
2. Manifest. json
3. Service workers
4. Cache-polyfill.js library

First of all create a dead simple webpage and make sure it is mobile friendly, we are not going to spend much of our time here on webpage design so you can keep it raw. 
Now we need to add manifest.json file to our webroot folder see example file from this app below.

Create-progressive-webapp

Before uploading this file you can verify your manifest.json file here
After successful validation upload that file in the webroot, This file helps chrome browser to identify you webpage as PWA.

Now in your webpage, index.html add a code for service worker registration. 

See below code for service worker registration.

Create-progressive-app-2

Now see how to add your files to browser caches. This code adds images, js,css to browser caches. In this code we call cache polyfill library and it has important caching functions.

Create-progressive-app-3

For better understanding refer all code here on github.

Progressive Web App in working

To see what I am talking about, Please open this link in your android mobile's chrome browser.

https://chintan4u.github.io   HTTPS & Chrome browser is required.

You will get this screen in your mobile chrome browser.

 

Click on three dot settings icon of the browser to add the web app to a mobile home screen.

 

 

Now close your mobile chrome browser.

Go to mobile home screen and click on app icon this will open like android/iOS app.

Progressive web app

Now Web app will launch, This web app called as progressive web app and gives user experience as same as the mobile native app.

Did you notice that there is no address bar on the app ?

Progressive web app

Please let me know your thoughts on this in the comment section below.

 

Update /21 June 2016 => Washington post recently launched a progressive app for their news website. Check this link in your  mobile browser https://www.washingtonpost.com/pwa/