Progressive web app

This article will explain you about progressive web apps/PWA and why PWA are important in business and their role in user retention and other information.

PWA short for Progressive Web App is the face of new app industry which is web driven and backed up by powerful database systems and a strong scripting base. PWA is a web app written using tools like HTML, Javascript, CSS but it acts like a native app and can also provide features like it.

PWA (Progressive Web App) is a type of hybrid app which is designed and developed in any of web related technologies. For frontend you can use HTML, CSS, ReactJS, AngularJS and for backend you can use ASP.NET, PHP, NODEJS etc anything of your choice. All you need is just a code editor such as Notepad, Notepad++, Visual studio code or Atom editor and a web browser specifically Google Chrome.

In the further page, you will get a detailed idea of what PWA (Progressive Web App) is and how to create one. It is really easy. So let's get started.

1. PWA (Progressive Web App) : Features

Higher page load speed
Highly responsive such as website
Increases user retention
SEO ready
Provides offline viewing functionality
Provied notification service
Easily built
Background sync feature

2. PWA (Progressive Web App) : Advantages

Higher page load speed
Highly responsive such as website
Increases user retention
SEO ready
Provides offline viewing functionality
Provied notification service
Easily built
Background sync feature

3. PWA (Progressive Web App) : Limitations

Till now, PWA (Progressive Web App) cannot access hardware of any device
All browsers except Safari does not support PWA (Progressive Web App)

4. Some businesses already implemented PWA (Progressive Web App)

Tinder
Uber
Instagram
Forbes
Pinterest
Twitter

5. Components which make website a 'PWA (Progressive Web App)'

A) Service Worker
The name suggests it as a big rocket science but in fact it is just a Javascript code snippet in a different file. A service worker is just a component which acts as a proxy between the browser and the network. A service worker manages the push notification and helps to build the offline first web application using browser's cache.

B) Manifest.json file
The manifest.json file is a config JSON file which contains the information of your app such as app icons which are to be displayed on app launcher in phone, the name and description of your app, background color of splash screen and theme color.

C) Site rendering on HTTPS
The HTTPS stands for hyper text transfer protocol secured. Service workers have the ability to intercept the network request and can modify the responses. Service worker performs all the actions on client side so that is why your web app needs to be deployed or hosted on HTTPS server.

Lots of theory, now Let's get to work...

1. Create a file named main_service_worker.js in your app folder. Copy or type the below code in that file.

var CACHE_NAME = "cache_name";
var urlsToCache = [
	'url of your websites home page'
];

self.addEventListener('install', function(event) {
	caches.delete(CACHE_NAME);

  event.waitUntil(
	caches.open(CACHE_NAME)
	  .then(function(cache) {
		console.log('Opened cache');
		return cache.addAll(urlsToCache);
	  })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
	caches.match(event.request)
	  .then(function(response) {
		if (response) {
		  return response;
		}

		return fetch(event.request).then(
		  function(response) {
			if(!response || response.status !== 200 || response.type !== 'basic') {
			  return response;
			}
			var responseToCache = response.clone();

			caches.open(CACHE_NAME)
			  .then(function(cache) {
				cache.put(event.request, responseToCache);
			  });

			return response;
		  }
		);
	  })
	);
});

2.Create an another file named manifest.json in your app folder. Copy or type the below code in that file.

{
  "short_name": "name of our app",
  "name": "name of your app",
  "icons": [
    {
      "src": "your image path",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "your image path",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "your website start home page url",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "prefer_related_applications" : false,
  "theme_color": "#FE9900"
}

3. Last step, in your index.php or index.html , in head section. Copy or type in the code below.

if ('serviceWorker' in navigator) {
	console.log("no service worker"); window.addEventListener('load', function () {
	navigator.serviceWorker.register('https://dandy.co.in/main_service_worker.js').then(function (registration) {
		console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, 
	function (err) {
		console.log('ServiceWorker registration failed: ', err);
    });
    });
}