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

【问题标题】：Workbox seemingly not pre-caching chunks from webpack buildWorkbox 似乎没有从 webpack 构建中预缓存块
【发布时间】：2019-11-25 11:48:35
【问题描述】：

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

尽管 Workbox 创建的清单包含指向正确块名称数组的链接（具有该特定构建的正确哈希），但 Chrome DevTools 似乎并未将块包含在预缓存列表中（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 不知道的其他资产。我没有使用webpack-dev-server，而是通过Phoenix 框架为网站提供服务。

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

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

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

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

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

【问题讨论】：

请看github.com/GoogleChrome/workbox/issues/2145
谢谢@JeffPosnick - 你确实是对的。
@shennan - 你使用的是哪个版本的 workbox webpack 插件？我正在使用 6.1.2，并且完全禁止使用 globDirectory 和 globPatterns 的 AFAIS。我目前正在努力解决this issue
@shennan - 我能够使用版本 4.1.3 (Webpack 4.0.0) 运行您的示例。尝试解决时来到这里this question of mine

标签： javascript webpack service-worker workbox workbox-webpack-plugin

【解决方案1】：

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

如果总数恰好大于 50，您需要使用箭头来翻阅条目，一次 50 个。

以下是前面提到的不显眼的页面按钮：

不是最好的 UI IMO。

【讨论】：