我有一个 Webpack 配置文件,它使用webpack-pwa-manifest
插件 ( https://github.com/arthurbergmz/webpack-pwa-manifest ) 生成 PWA 清单文件。清单文件名为manifest.hash.json
,其中“hash”是在每次构建时动态生成的值。
我还使用(https://developers.google.com/web/tools/workbox/modules/workbox-webpack-pluginInjectManifest
)插件来渲染预缓存清单,然后将其注入到服务工作线程文件中。Workbox
这是我的 Webpack 配置文件的“插件”部分:
plugins: [
new CleanWebpackPlugin([ path.join(destDir, '*.*') ], {
allowExternal: true,
exclude: [],
verbose: true,
dry: false
}),
new MiniCssExtractPlugin({
filename: 'style.[hash].css'
}),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: path.join(projectRoot, 'src/index.html')
}),
new WebpackPwaManifest({
name: 'Test PWA',
short_name: 'Test PWA',
fingerprints: true,
inject: true,
lang: 'en-US',
start_url: 'https://localhost:8120/index.html',
display: 'standalone',
theme_color: '#777777',
background_color: '#333333',
icons: [
{
src: path.join(sourceDir, 'images/icon.png'),
sizes: …
Run Code Online (Sandbox Code Playgroud)