该插件解决
service-worker.js
文件no-cache
问题,如果在服务端能做到对service-worker.js
的no-cache
, 可以忽略此方案。 主要解决服务端不能对service-worker.js
进行no-cache
设置的问题,并且要求service-worker.js
实时监测更新的场景。
npm install sw-register-webpack-plugin --save-dev
// ...
import SwRegisterWebpackPlugin from 'sw-register-webpack-plugin';
// ...
webpack({
// ...
plugins: [
new SwRegisterWebpackPlugin(/* options */);
]
// ...
});
// ...
{
version: 'this is a version string'
}
version
默认值是当前时间的时间版本字符串
{
filePath: './src/sw-register.js'
}
filePath
默认值是 ./src/sw-register.js
如果没有配置这个字段,插件会优先寻找 ./src/sw-register.js
文件
如果还是没找到这个文件,插件会使用内置的 sw-resgiter.js
文件进行 service worker
文件注册。
{
prefix: '/some_scope'
}
{
includes: [
'a.html.tpl', // 文件名为 a.html.tpl 的文件,
/b\.html\.tpl$/, //也可以是正则
// 也可以是一个 callback function, 参数为待验证的每一个文件的 path
function (asset) {
return asset.endsWith('c.html.tpl')
}
]
}
includes 是指定工程中非 html 文件也需要注册 sw 的,通常为模版文件。
需要注意的是,如果要指定非 html 文件也自动注册 sw, 该文件内容必须包含 <body></body>
标签
{
excludes: [
'a.html', // 文件名为 a.html 的文件,
/b\.html$/, //也可以是正则
// 也可以是一个 callback function, 参数为待验证的每一个文件的 path
function (asset) {
return asset.endsWith('c.html')
}
]
}
excludes 是指定工程中符合自动注册的文件中的某一些文件可以不自动注册。
插件会默认使用 webpack output 中的 publicPath 来做为 service-worker.js 的 scope, 如果不想使用这个 scope, 可以通过 prefix 指定自定义的 scope。
{
output: '/module/sw-register.js'
}
更改输出的位置,建议和prefix
搭配使用。
sw-register-webpack-plugin
有一个内置的 message
时间处理函数,其作用是专门接受 service-worker.js
发送的 postMessage
事件
我们会借助这个事件完成 service-worker.js
文件更新的实时监测。
当 service-worker.js
进入 activate
状态,可以做如下操作:
clients[0].postMessage('sw.update')
service-worker.js
需要保证能够被访问到