Build your PWA

Overview

Earlier we briefly introduced the PWA, below we will take a look at how to build your own PWA with libs and tools.

First, move your site to HTTPS

In addition to providing users with a secure browsing experience, HTTPS is also a basic requirement for implementing many new browser features, especially the PWA-related features.

So, before building a PWA, you have to make sure your site has been upgraded to HTTPS. Of course, in the development phase, we can build a local proxy server to achieve the HTTPS content access, recommended proxy server is: whisle, based on node.

Also, you may want to know how to enable HTTPS on your server: Enabling HTTPS on Your Servers

Get to know Service Worker

Features such as Offline experiences, Background sync, Web Push depend on Service Worker as the fundamental technology. If you do not understand Service Worker, you can click on the link above to get to know Service Worker, especially life cycle of the Service Worker.

sw life cycle | center

PWA libraries & tools

workbox

Workbox is a collection of JavaScript libraries for Progressive Web Apps.

sw-precache-webpack-plugin

Webpack plugin that generates a service worker using sw-precache that will cache webpack's bundles' emitted assets.

It is recommended to introduce workbox to speed up the development of PWA.It allows you to quickly implement features such as pre-caching, offline experience. You can also easily configure different caching strategies for different routes.

Here is an example of using workbox as a Service Worker base library: https://xw.qq.com/service-worker.js. As you can see, using workbox will make it easy and efficient to build a PWA.

Meantime, React and Vue also provide support for PWA:

Implement Add to Homescreen

Please refer to:

Implement Web Push

Please refer to:

debugging

Metric

Suggestions

Caching practices configure your web server to add HTTP headers to prevent caching of critical service worker files

Caching best practices & max-age gotchas

Delay Service Worker registration for a fast first load

window.addEventListener('load', function() {
  if('serviceWorker' in navigator){
     navigator.serviceWorker.register('/sw.js').then(function (registration) {
      console.log('Service Worker Registered,register script: sw.js.');
    }).catch(function (error) {
      // registration failed
      console.log('Registration failed with ' + error);
    });
  }
});

Monitor Service Worker runtime errors

Add the following script sample to your registration script and, when an error occurs, you can see what happened to your PWA on the client side:

self.addEventListener('error', function (event) {
  var msg = {
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    stack: event.error && event.error.stack
  };
  // report error msg 
});

self.addEventListener('unhandledrejection', function (event) {
  // event.reason
  if (/Quota exceeded/i.test(event.reason)) {
    // maybe clean some cache here
  }
});

Design a friendly error page

Design a friendly error page as fallback, so your user won't see the broken 500+ page.