如何将生成的PWA manifest纳入Workbox生成的precache-manifest

嘿，刚好我之前处理过一模一样的需求，给你分享两个靠谱的实现方式：

方法一：直接利用Webpack占位符配置额外预缓存条目 #

这是最简单的方式，因为webpack-pwa-manifest生成的文件名用了[contenthash]占位符，而Workbox的InjectManifest插件能识别Webpack的这些占位符，直接把它加入预缓存清单。

配置示例如下：

const WebpackPwaManifest = require('webpack-pwa-manifest');
const { InjectManifest } = require('workbox-webpack-plugin');

module.exports = {
  // 你的其他Webpack配置（entry、output等）
  plugins: [
    new WebpackPwaManifest({
      filename: 'manifest.[contenthash].json', // 带哈希的文件名
      name: '我的PWA应用',
      short_name: 'PWA',
      start_url: '/',
      display: 'standalone',
      background_color: '#ffffff',
      // 其他manifest配置项...
    }),
    new InjectManifest({
      swSrc: './src/service-worker.js', // 你的Service Worker源文件
      // 关键：添加额外的预缓存条目
      additionalManifestEntries: [
        {
          url: 'manifest.[contenthash].json',
          revision: '[contenthash]' // 用文件哈希作为revision，确保更新时重新缓存
        }
      ]
    })
  ]
};

Webpack在编译时会自动把[contenthash]替换成实际的哈希值，Workbox会把这个生成的manifest文件加入到precache清单里，后续Service Worker就会自动缓存它。

方法二：通过插件钩子动态获取文件名（更灵活） #

如果你的manifest文件名规则有变化，或者需要更精准地控制，可以利用webpack-pwa-manifest的钩子拿到最终生成的文件名，再传给Workbox。

代码示例：

const WebpackPwaManifest = require('webpack-pwa-manifest');
const { InjectManifest } = require('workbox-webpack-plugin');

// 用来存储最终生成的manifest文件名
let generatedManifestFilename;

module.exports = {
  // 其他Webpack配置
  plugins: [
    new WebpackPwaManifest({
      filename: 'manifest.[contenthash].json',
      // 其他manifest配置...
      // 利用afterEmit钩子获取最终的文件名
      hooks: {
        afterEmit: (manifest) => {
          generatedManifestFilename = manifest.options.filename;
        }
      }
    }),
    new InjectManifest({
      swSrc: './src/service-worker.js',
      // 动态生成额外预缓存条目
      additionalManifestEntries: () => {
        if (!generatedManifestFilename) return [];
        // 从文件名中提取哈希作为revision
        const hashMatch = generatedManifestFilename.match(/\.([a-f0-9]+)\.json$/);
        const revision = hashMatch ? hashMatch[1] : null;
        
        return [
          {
            url: generatedManifestFilename,
            revision
          }
        ];
      }
    })
  ]
};

这个方法的优势是能准确获取插件生成的实际文件名，避免占位符可能带来的匹配问题，适合复杂的配置场景。

额外提示 #

不管用哪种方法，只要你的Service Worker源文件里没有手动覆盖precache逻辑，Workbox的InjectManifest都会自动把这些额外条目合并到生成的precache-manifest中，确保manifest文件被正确预缓存。

内容的提问来源于stack exchange，提问作者Kirlat