1. webpack.config.js
const GenerateSW = require('workbox-webpack-plugin');
...
// 插件
module.exports = {
...
plugins: [
...
new GenerateSW.GenerateSW({
// 帮助 serviceworker 快速启动
// 删除旧的 serviceworker
// 生成一个 serviceworker 配置文件
clientsClaim: true,
skipWaiting: true
})
],
// 模式 development 开发, production 生产自动压缩js代码
mode: 'production',
devtool: 'source-map'
}
2. package.json
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
},
3. index.js
/**
* eslint 不认识 window, navigator 全局变量
* 解决: 需要修改 package.json中eslintConfig配置
* "env": {
* "browser": true
* }
*
* sw 代码必须运行在服务器上
* --> nodejs
* --> npm i serve -g
* serve -s build // 启动服务器,将build目录下所有资源作为静态资源暴露出去
*
* */
// 注册 serviceworker
// 处理兼容性问题
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('service-worker.js').then(() => {
console.log('sw注册成功了');
}).catch(() => {
console.log('sw注册失败了');
});
});
}