Question

我正在使用Webpack编译我的网站，并使用Workbox Webpack Plugin编译服务工作者。

尽管由Workbox创建的清单包含指向正确的块名称数组的链接（该特定构建具有正确的哈希值），但Chrome DevTools似乎并未在预缓存列表中包含这些块（DevTools>应用程序>缓存存储）。

这是我对插件的配置：

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中的“网络”选项卡确实在块名称的(ServiceWorker)列中显示了Size。但是，当那些脚本未出现在缓存存储中时，我该如何相信呢？

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

Answer 1

根据Jeff在GitHub issue上的评论，这是由于ChromeDev Tools上的用户界面混乱造成了缓存存储结果的分页。

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

以下是上述不起眼的页面按钮：

不是最好的UI IMO。

工作箱似乎没有预缓存Webpack构建中的块

1 个答案: