Now you can provide your feedback to our articles!

Progressive web app

Last updated : Dec 11, 2021

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);
    });
    });
}



How video streaming works on t...

Read more

Setup react and express on sam...

Read more

How neurons in brain function

Read more

How to create custom router in...

Read more

Run C++ as CGI script in web b...

Read more

Real time chat application usi...

Read more

How to setup lemp stack in ubu...

Read more

How to secure phpmyadmin in Ub...

Read more

How to create real time notifi...

Read more

How to create simple api in no...

Read more

Task scheduling with cron job ...

Read more

How to use modules in Javascri...

Read more

Create a multi language(lingua...

Read more

Create food ordering app - Foo...

Read more

Linear Regression in machine l...

Read more

Create simple web application ...

Read more

Why algorithms can drive the i...

Read more

Why Javascript frameworks are ...

Read more

Create authenticated API in La...

Read more

Create simple and static websi...

Read more

Setup Pusher app

Read more

Laravel Installation and setti...

Read more

Realtime chat application in L...

Read more

Working of neurons (the easy w...

Read more

Sign in for comment. Sign in