如何将生成的 PWA 清单包含到 Workbox 呈现的预缓存清单中答案

【问题标题】：How to include a generated PWA manifest into a precache-manifest rendered by Workbox如何将生成的 PWA 清单包含到 Workbox 呈现的预缓存清单中
【发布时间】：2018-09-24 17:33:18
【问题描述】：

我有一个 Webpack 配置文件，它使用 webpack-pwa-manifest 插件 (https://github.com/arthurbergmz/webpack-pwa-manifest) 生成 PWA 清单文件。清单文件名为manifest.hash.json，其中“hash”是每次构建时动态生成的值。

我还使用Workbox (https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) 的InjectManifest 插件来呈现预缓存清单，然后将其注入到服务工作者文件中。

这是我的 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: [36, 48, 72, 96, 144, 192, 512],
            destination: 'icons'
          }
        ]
      }),
      new InjectManifest({
        swSrc: path.join(projectRoot, 'src/sw.js'),
        swDest: 'sw.js',
        importWorkboxFrom: 'local',
        globPatterns: ['dist/*.{json,js,html}']
      })
    ]

问题是我找不到将渲染的manifest.hash.json 添加到 InjectManifest 生成的预缓存清单中的方法。有什么办法可以让他们一起玩得很好，还是不可能？

【问题讨论】：

如果你能给manifest一个chunk名字，你应该可以添加workbox webpack插件的chunk。

标签： webpack workbox

【解决方案1】：

我在名为 manifest.<chunkhash>.js 的公共块中遇到了同样的问题，该块未包含在生成的预缓存清单中。

解决方案是在 webpack 配置文件中将exclude 选项添加到InjectManifest 插件，因为它的默认值是（根据docs）：[/\.map$/, /^manifest.*\.js(?:on)?$/]。

plugins: [
  new InjectManifest({
    swSrc: path.join(projectRoot, 'src/sw.js'),
    swDest: 'sw.js',
    importWorkboxFrom: 'local',
    exclude: [] // <-- Add this
  })
]

【讨论】：

很棒的发现。问题甚至被标记为工作箱中的错误，而实际上它只是一个每个人都忽略的配置github.com/GoogleChrome/workbox/issues/1588

【解决方案2】：

已在 Workbox v4.0.0 中修复：https://github.com/GoogleChrome/workbox/pull/1679

【讨论】：

【解决方案3】：

webpack-pwa-manifest 插件生成的文件不包含在 webpack 构建管道中（可能是一个错误），因此InjectManifest 插件无法即时添加所有资产。

有一种解决方法可以使用 globDirectory 和 globPatterns 选项预缓存其他资产：

new InjectManifest({
  swSrc: './dist/sw.js',
  globDirectory: '.',
  globPatterns: ['dist/manifest.*.json']
})

在此配置示例中，插件获取所有捆绑包和您的附加清单文件作为外部文件。但是 webpack 给你一个警告：

您正在使用以下 Workbox 配置选项： [globDirectory，globPatterns]。在 Workbox v3 及更高版本中，这是通常不需要。

你应该只将它用于那些不是由 webpack 执行的资产。查看docs中的解释。

在您的特定配置中，问题是您错过了globDirectory: '.' 选项并且插件找不到文件。

我希望它仍然相关并且对您有所帮助。

【讨论】：