Progressive Web Apps Basics

Progressive Web Apps brings your typical website experience closer to that of a mobile app. Unlike normal websites they can cater for bad network conditions (or even being completely offline), add an icon to the home screen and send push notifications. Two important aspects of Progressive Web Apps that we’ll talk about in this article are Service Workers and Manifest Files.

Service Workers

Service Workers are one of the main components of Progressive Web Apps. A Service Worker runs separately to the main browser thread.

With a few simple lines of JavaScript you can register your Service Worker:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

Once the Service Worker is registered you can add code to intercept requests, cache resources and send push notifications. For example, if you want your Progressive Web App to work in times of bad/no internet connectivity you can get the Service Worker to intercept network calls and cache resources and if the network is not available in the future the cached resource can be used as a fall-back.

Service Workers are compatible with most modern web browser like newer versions of Chrome (45+), Firefox (44+), Edge (17+) and Opera (32+).

Manifest Files

A manifest file is used to provide information about how the web application should work when being installed onto a device. The information is provided in a JSON format, which contains properties like the name of the app, icons, theme colour etc.

This JSON file is then simply added to the HTML of the webpage like:

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

Useful links

Building an offline progressive web app: https://developers.google.com/web/fundamentals/codelabs/offline/

Web app manifest files: https://developers.google.com/web/fundamentals/web-app-manifest/

Service Worker browser compatibility: https://caniuse.com/#search=serviceworker