Workbox 似乎没有从 webpack 构建中预先缓存块

Question

我正在使用 Webpack 来编译我的站点，并使用 Workbox Webpack Plugin 来编译 service worker。

尽管 Workbox 创建的清单包含 link 到正确的块名称数组（具有针对该特定构建的正确哈希值），Chrome DevTools 似乎不包含预缓存列表中的块（DevTools > Application > Cache Storage）。

这是我的插件配置：

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, caching of additional assets which Webpack is not aware of should be done through this configuration option. I'm not using webpack-dev-server, and I'm serving the site through the Phoenix 框架。

查看从 Workbox 生成的 /service-worker.js，它正在导入清单，其中包含对正确块的引用。但它们只是没有被加载到缓存存储中的预缓存中：

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

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

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

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

Answer 1

根据 Jeff 对 GitHub issue 的评论，这是由于 UI 对缓存存储结果分页的 ChromeDev 工具造成混淆。

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。

Workbox 似乎没有从 webpack 构建中预先缓存块

Workbox seemingly not pre-caching chunks from webpack build

javascript

webpack

service-worker

workbox

workbox-webpack-plugin