Web应用在网络断开时可以借助Workbox插件来使应用程序能够继续运行功能。
1. 安装 workbox-webpack-plugin插件:
npm install workbox-webpack-plugin --save-dev
2. 配置文件中声明并在plugins中初始化该插件:
const WorkboxPlugin = require('workbox-webpack-plugin');
plugins: [
new WorkboxPlugin.GenerateSW({
// 这些选项帮助快速启用 ServiceWorkers
// 不允许遗留任何“旧的” ServiceWorkers
clientsClaim: true,
skipWaiting: true,
}),
]
3. 在主js文件中注册service worker
//注册 Service Worker 完成安装、配置workbox插件后还需要注册service worker
//因为兼容性问题,先做判断,存在service worker才用
//只是这样配置还会有问题,因为我们的网页打包后在dist目录,但浏览器会在根目录下找寻service worker
//因此需要安装serve静态资源服务器
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);
});
});
}
4. 需要注意的是,Webpack打包的输出文件往往在dist目录下,这样在注册serviceWorker时会失败,可以全局安装一个静态资源服务器,在相应的目录下启动服务器,就可以离线使用web app:
npm i serve -g
serve dist
配置完成