PWA 渐进式网络应用程序
开发Web App 项目，项目一旦处于离线状态，就没有办法访问了，我们希望给项目提供离线体验
渐进式网络应用程序（progressive web application)简称PWA，是一种可以提供类似于 native app（原生应用程序）体验的web app的技术。其中最重要的是，在离线（offline）时应用程序能够继续运行功能。
内部通过 Service Workers 技术实现的。
让我们配置看看怎么使用PWA
- 下载插件
npm install workbox-webpack-plugin --save-dev
- 在
webpack.config.js
const WorkboxPlugin = require('workbox-webpack-plugin')
module.exports = {
...
plugins:[
new WorkboxPlugin({
// 这些选项帮助快速启用 ServiceWorkers
// 不允许遗留任何“旧的” ServiceWorkers
clientsClaim: true,
skipWaiting: true,
})
]
}
完成这些设置后运行 npm run build , 看一下会发生什么：
dist 文件下生成了两个额外的文件：service-worker.js和workbox-460519b3.js。我们现在已经创建出一个 Service Worker。
- 注册 Service Worker
在main.js中
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);
});
});
}
再次运行 npm run build 来构建包含注册代码版本的应用程序。现在来进行测试。停止 server 并刷新页面。如果浏览器能够支持 Service Worker，应该可以看到你的应用程序还在正常运行。然而，server 已经停止 serve 整个 dist 文件夹，此刻是 Service Worker 在进行 serve。
