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.
PWA libraries & tools
Workbox is a collection of JavaScript libraries for Progressive Web Apps.
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.