3

我正在使用 Webpack 来编译我的站点,并使用Workbox Webpack 插件来编译 service worker。

尽管 Workbox 创建的清单包含指向正确块名称数组的链接(具有该特定构建的正确哈希),但 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在编译时已经跟踪文件。但是,根据此处的建议,应通过此配置选项缓存 Webpack 不知道的其他资产。我没有使用webpack-dev-server,而是通过Phoenix框架为该站点提供服务。

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

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

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

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

使用的插件版本是 4.xx 更高版本的插件不允许使用参数globDirectoryglobPatterns.

4

1 回答 1

1

根据 Jeff 对GitHub 问题的评论,这是由于 ChromeDev Tools 上的 UI 混淆,它对缓存存储结果进行了分页。

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

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

在此处输入图像描述

不是最好的 UI IMO。

于 2019-07-26T15:05:06.633 回答