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.

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.

PWA libraries & tools

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.