javascript - Workbox 似乎没有从 webpack 构建中预先缓存 block

Question

我正在使用 Webpack 编译我的站点和 Workbox Webpack Plugin编译服务 worker 。

尽管 Workbox 创建的 list 包含指向正确 block 名称数组的链接(具有针对该特定构建的正确哈希值)，Chrome DevTools 似乎并未将这些 block 包含在预缓存列表中(DevTools > Application >缓存存储)。

这是我的插件配置:

new GenerateSW({
  swDest: '../service-worker.js',
  globDirectory: 'priv/static',
  globPatterns: ['**/*.{js,css,png,svg,jpg,gif,woff2}'],
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/js.intercomcdn.com\/[a-zA-Z0-9-/_.]*(js|woff)/,
      handler: 'NetworkFirst'
    }, {
      urlPattern: /^https:\/\/fonts\.googleapis\.com/,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'google-fonts-stylesheets'
      }
    },
    {
      urlPattern: /^https:\/\/fonts\.gstatic\.com/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'google-fonts-webfonts',
        cacheableResponse: {
          statuses: [0, 200]
        },
        expiration: {
          maxEntries: 5,
          maxAgeSeconds: 60 * 60 * 24 * 365, // one year
        }
      }
    },
    {
      urlPattern: /^https:\/\/logo.clearbit.com/,
      handler: 'NetworkFirst'
    }, {
      urlPattern: /^https:\/\/www.gravatar.com\/avatar\//,
      handler: 'NetworkFirst'
    }
  ]
})

shell 中有关于不需要包含 globDirectory 和 globPatterns 的警告，因为 Webpack 在编译时已经跟踪文件。但是，根据 advice here ，缓存 Webpack 不知道的其他 Assets 应该通过这个配置选项来完成。我没有使用 webpack-dev-server，而是通过 Phoenix 为网站提供服务框架。

查看从 Workbox 生成的 /service-worker.js，它正在导入一个 list ，该 list 确实包含对正确 block 的引用。但它们只是没有被加载到缓存存储中的预缓存中:

importScripts(
  "/js/precache-manifest.94f30538f0c03a9278244eabf2ce9e52.js" // This points to a manifest with the correct chunk names/hashes
);

可能值得注意的是，DevTools 中的网络选项卡确实在 block 名称的 Size 列中显示了 (ServiceWorker)。但是当这些脚本没有出现在缓存存储中时，我如何相信这一点？

更奇怪的是，如果我删除对 globDirectory 和 globPatterns 的引用，Webpack block 文件确实会出现在缓存存储中。但是，这个问题是我有 Webpack 不知道的 Assets ，我想使用 Workbox 进行预缓存。

使用的插件版本是 4.x.x。更高版本的插件不允许参数 globDirectory 和 globPatterns。

Answer 1

根据杰夫对 GitHub issue 的评论，这是由于对缓存存储结果进行分页的 ChromeDev 工具上的 UI 混淆。

If the total number happens to be greater than 50, you'll need to use the arrows to page through entries, 50 at a time.

这是前面提到的不显眼的页面按钮:

不是最好的 UI IMO。