PWA / Progressive Web Apps

Even though we are technologically advanced upto 5G or Li-Fi , many are still loading website with low speed internet access.This becomes a problem to use a high end apps.

What is the solution?

Progressive Web Apps

Solution: Google came up with the concept of Progressive Web Apps (PWA) at its I/O Conference in 2016.

Advantages:

• Reliable — Load instantly and never show the downasaur, even in uncertain network conditions.
• Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling.
• Engaging — Feel like a natural app on the device, with an immersive user experience.

Though it does not give Native app experience, but it can atleast serve required content to the user. The main advantage is that it can even load and run offline. PWA are build with simple and minimal UI which can load fast and gives the content correctly.Push Notification can be added to increase the user experience. Many site like Flipkart, AliExpress, Twitter are using PWA to increase the customers reviews.

It is not complex to make a website into PWA. The three important requirements of PWA are App Shell, Service Worker and App Manifest.

STEP 1:

Create LOGO for your website which is going to be placed in HomeScreen as your app icon.

STEP 2:

Add service-worker file (sw.js) in your project.

var cacheName = 'App Name';
var filesToCache = [
   '/',
  '/index.html',
  '/style.css',
  '/icons/icon-72x72.png',
  '/icons/icon-96x96.png',
  '/icons/icon-128x128.png',
  '/icons/icon-144x144.png',
  '/icons/icon-152x152.png',
  '/icons/icon-192x192.png',
  '/icons/icon-384x384.png',
  '/icons/icon-512x512.png'
  /* list of items to be cached*/
];
self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);  
    })
  );
});
self.addEventListener('activate',  event => {
  event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request, {ignoreSearch:true}).then(response => {
      return response || fetch(event.request);
    })
  );
})

STEP 3:

You can use App Manifest Generator to create manifest.json file. Just add manifest.json into index.html file and publish the site.

<link rel="manifest" href="manifest.json">

IMPORTANT: PWA works only with site served with https. This eventually increase the web security and privacy.

Here I had created a simple Time displaying app hosted using Netlify.

Check my code at :

pravindia/pwa

Refer Google for more detail:

Progressive Web Apps Training | Web | Google Developers

Knowing is not enough, we must apply — Bruce Lee

Thanks for reading!