Few points about Progressive Web Apps

To expand with web application or mobile application is the most common trend these days, as it is the fastest platform to correlate the users rapidly and even for users it is high time-saving as it is the one-stop solution, where varied kinds of stuff are obtained right at one location or website or click or mobile app.

Build as Web, Act as App

Progressive Web Apps (PWAs) have swiftly embraced the web application market with its ability of quick execution on mobile devices and even streamlining in both online and offline mode. PWAs are implemented utilizing HTML, CSS, and JavaScript to make a level of ease of use and execution that is way faster than local versatile applications. They are highly responsive, take lesser information and storage space.

Google introduced PWAs for those enterprises who have a responsive web app and want that their end users get feel alike Native apps (that too without developing the mobile application).

Huge players namely – Flipkart Lite, Olacabs, Snapdeal, Makemytrip, Aliexpress, Alibaba, Trivago, Jumia, Redmart, Goibibo and much more already adapted PWAs and found major changes in their conversion rate, bounce rate, new customer acquisition, user-generated ad revenue, page load speed, impressions per visit, average user session length, completion rate, pages per session.

Outcomes of PWAs acceptance are very profitable with mind blowing boost to the existing web application.

Technologies for Progressive Web App Development

To build your PWA, two main building blocks which you should add in your application are:

1. A web app manifest file
2. Service-worker file

1. Web App manifest File

Mainly, the web app manifest file is JSON file that contains the data like name, short name, icon, background-colour, start_url of PWA. The web app manifest file is to provide information about web applications. That means the browsers detect the data information for how to display your application when it’s saved as Shortcut to Homescreen.

This “manifest.json” file is linked to theof your site.

2. The Service Worker

The service worker is JavaScript file which react in background process and perform few tasks like,

• Check the network availability and display some response according to the network state which is no network or/ network connection available
• Rendering Push notification
• Add application data into the browser cache when online and get that data when offline

The service worker is automatically installed in the browser and it is independent of the application and run in some event like push notifications, connection changes, network availability or more. Firstly, need to register the service worker to keep active and get some response.

When the user first time loads the page, the service worker “install” event triggers. At that time all the static assets are stored in browser cache. In the service worker “activate” event, the service worker update when is there any changes in app shell and in the last “fetch” event, if is there any cache assets are available in the browser that catches to serve the app shell.

Straining for restraint

There are more users to use PWA in different types of the mobile browsers, so at times it is more complex to maintain the records of all browsing and visiting users. This can be overcome with new updates and brainstorming well before Progress Web App Development.

To Build a simple Progressive Web App

For building the demo structure of first PWA, I developed first one as WeatherInfo from the refrence url is https://developers.google.com/web/progressive-web-apps/

After the successful implementation, I am now developing PWA about news information for which steps are as mentioned below with a brief:

First, create an index.html file and add the manifest.json into the head tag of your site. Now add the given code in web app manifest file,

manifest.json

{
  "name": "news",
  "short_name": "news",
  "icons": [{
    "src": "images/icons/icon-128x128.png", \\ something is your directory path
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-144x144.png", \\ something is your directory path
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-152x152.png", \\ something is your directory path
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-192x192.png", \\ something is your directory path
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-256x256.png", \\ something is your directory path
      "sizes": "256x256",
      "type": "image/png"
    }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

As shown above, the JSON data like name, icon, display, start_url are defined in the manifest file and are retrieved when the web application is saved as a shortcut to Home Screen.

After adding the web app manifest file, now need to add service worker file in the application which is more important to build the PWA. First of all, need to register the service-worker in the browser. For that, add the below-mentioned steps in the app.js file:

if ('serviceWorker' in navigator) {
        navigator.serviceWorker
                .register('./sw.js')
                .then(function () {
                    console.log('Your SW Registered');
                });
    }

After that need to install and activate the service worker in the browser, so add the given code to the service worker file:

sw.js

/* For install the service worker */
self.addEventListener('install', function (e) {
    console.log('Install SW');
    e.waitUntil(
            caches.open(newsCache).then(function (cache) {
        console.log('Caching app shell');
        return cache.addAll(newsfiles);
    })
            );
});
 
/* For activate the service worker */
self.addEventListener('activate', function (e) {
    console.log('[ServiceWorker] Activate');
    e.waitUntil(
            caches.keys().then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
            if (key !== newsCache) {
                console.log('[ServiceWorker] Removing old cache', key);
                return caches.delete(key);
            }
        }));
    })
            );
    return self.clients.claim();
});

Here, newsfiles variable comprises of files like HTML, JavaScript, CSS which developer wants to cache. Here, NewsCache represents the name of the cache store in the browser.

Now, the App Shell is the simplest design pattern in which initially an app UI is loaded and then after the app content is loaded. when the app UI is loaded, immediately the design is store locally. Later on, after some time to run the app, the Shell files are loaded from the local storage and at that time app is loaded quicker compared to the initially loaded ones.

After that, developer requires to fetch the all data content from the cache, when the network status is offline. So, for it includes some fetch function content into the service worker file itself.

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

offline.js

Firstly, we required checking whether the network connection is available or not. For that progressive web developer need to add the simple offline.js file to verify the internet connection. To be precise, this file is defined at the end of the body of the index.html file.

(function () {
    'use strict';
    window.addEventListener('online', function (e) {
      //  document.querySelector('.add').removeAttribute('hidden');
        console.log("You are online");
    }, false);
    window.addEventListener('offline', function (e) {
       // document.querySelector('.add').setAttribute('hidden', true);
        console.log("You are offline");
    }, false);
 
    // Check if the user is connected.
    if (navigator.onLine) {
        console.log("You are online before app loaded");
    } else {
        // Show offline message
        console.log("You are offline before page load");
    }
})();

Now in the demo newsinfo application, the News data is retrieved from the Rest API which is in JSON string formation. In the first step, when the app is loaded, News data is stored in browser’s local storage. Then, News data is separated in card template and when one clicks on any particular newsinfo card, it displays complete information about that News like Title, Description, Created Date, various types of News along with visual information like images, videos, etc.

If offline mode is enabled then it triggers fetch event and returns the data from the cache, if network request fails. In this PWA including some features like adding fresh News data into the given Rest API in online mode.

Benefits of Embracing PWA

Core advantage of PWA is no need to install a mobile application from the App Store but still have the feel and experience like a mobile apps – so less space consumption and lighting loading speed similar to AMP (if integrated). Apart by, it runs and loads in both – online and offline mode, so internet is never an obstruction to load the information and for the enterprises to stay constantly in connection. Progressive Web App is usually installable apps not from app-store apps but as background operating functionality with service worker, faster load time with App Shell and put in Home Screen icon with the manifest also engaging Push Notifications and also easily Searchable in any search engines.