1 . Why？
开发 Web App 项目，项目一旦处于网络离线状态，就没法访问了。我们希望给项目提供离线体验。
2 . 是什么？
3 . How?
-
下载插件
- npm install workbox-webpack-plugin --sava-dev -
引入并配置
new WorkboxPlugin.GenerateSW({\
// 这些选项帮助快速启用 ServiceWorkers\
// 不允许遗留任何“旧的” ServiceWorkers\
clientsClaim: true,\
skipWaiting: true,\
}),\
- 在 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);
});
});
}
-
下载部署静态资源服务器的库 serve
-
npm i serve -g
-
执行命令 serve dist 部署 dist 下的资源
-
