generate-register-sw-plugin v1.0.4
使用方法
npm i generate-register-sw-plugin
测试例子
npm run inject:example
npm run example
跑完之后可以在 dist
目录下找到对应的 service-worker.js
swRegister.js
precacheManifest.js
等文件
字段说明
swFilePath
:service-worker
的规则文件路径,默认优先使用workboxGenrateSWOption
配置中的swDest
字段, 不存在上述字段的时候再使用swFilePath
的值, 该字段会替换模版中的{{swFilePath}}
字符串,具体请看build/swTpl.js
文件swRegisterFileName
:生成的注册service-worker
的js
文件路径,没有默认使用js/swRegister.js
路径tplPath
:生成的注册service-worker
的js
文件的参照模版路径,没有即将使用默认build/swTpl.js
文件inject
:是否注册service-worker
的代码直接插入到html
的最后面,默认false
,false
将会以外链的方式插入到最后面,使用该功能需要把该插件放到html-webpack-plugin
后面,否则会找不到html
文件tplData
:模版所需要的字段,{{env}}
会被替换成env
值的字符串,具体请看build/swTpl.js
文件injectHtmlPath
: 存在该字段的时候,会在这个html
下注入js
代码, 并且忽略html-webpack-plugin
生成的html
workboxGenrateSWOption
: 支持workbox-webpack-plugin
的GenerateSW
插件配置(对该配置项完全透传给workbox-webpack-plugin
), 详细见: https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_generatesw_config, 使用该配置有些坑, 比如在runtimeCaching
中不配置cacheName
就无法使用expiration
,precacheManifestFilename
如果不包含[manifestHash]
也跑不起来, 这是workbox-webpack-plugin
本身存在的问题workboxInjectManifestOption
: 支持workbox-webpack-plugin
的预加载InjectManifest
插件,详细配置见 https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#injectmanifest_plugin_2
注意: 该插件最好配合 html-webpack-plugin 一起使用, 放在 html-webpack-plugin 插件后面, 会自动为所有生成的 html 文件插入注册的代码
new GenerateRegisterSWJS({
swFilePath: './service-worker.' + process.env.BUILD_ENV + '.js',
swRegisterFileName: 'js/swRegister.js',
tplPath: undefined,
inject: false,
injectHtmlPath: './example/index.html',
tplData: {
env: process.env.BUILD_ENV,
version: BUILD_VERSION,
isOpenPWA: process.env.BUILD_ENV === 'dev' ? true : true
},
workboxGenrateSWOption: object || false,
workboxInjectManifestOption: object || false
})
})