前言

PWA是一种可以提供类似于原生应用程序(native app)体验的网络应用程序(web app)。PWA 可以用来做很多事。其中最重要的是，在离线(offline)时应用程序能够继续运行功能。这是通过使用名为 Service Workers 的网络技术来实现的。
今天通过webpack中引用workbox-webpack-plugin插件简单实现浏览器缓存，防止服务器崩溃时候页面直接崩溃。
相关文档地址：
PWA
workbox-webpack-plugin

使用

1、安装

const { GenerateSW } = require('workbox-webpack-plugin');
plugins:[new GenerateSW ({
  clientsClaim: true,
  skipWaiting: true
})]

2、注册

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js').then(registration => {
        console.log('SW registered: ', registration);
        }).catch(registrationError => {
        console.log('SW registration failed: ', registrationError);
        });
    });
}

项目中加入serviceWorke的注册当下次服务器崩溃时候仍然可以访问到缓存项目。

image.png

3、本次测试

为了本地测试，可以使用http-server在本地启动一个服务，访问dist目录。

"scripts": {
    "start": "http-server dist",
    "build": "webpack  --config ./build/webpack.prod.js",
    "dev": "webpack-dev-server --config ./build/webpack.dev.js  --open",
    "analyz": "NODE_ENV=production npm_config_report=true npm run build"
 },

启用npm run start,然后关闭服务就可以看到效果。

总结

Service Worker 作为一个新的技术，在静态资源缓存和处理多页面所需的复杂数据等方面都有很不错的应用前景。作为实现 PWA 不可或缺的一部分，我相信，不管是他的浏览器兼容性、功能的多样性以及文档的完整性，都会变的越来越好。