2

我正在使用带有 Webpack 的 Workbox 在运行时在我的站点上缓存多个资产，并使用 Service Worker 交付它们。我能够在缓存存储中成功查看来自外部 CDN 的图像，并确认它们是通过 SW 交付的。

但是，当涉及到 JS 和 CSS 文件等本地托管（同源）资产时，它们的命名缓存显示为空。加载页面后，这些资产被交付(from ServiceWorker)，并且没有来自 SW 的额外网络请求。刷新缓存存储或缓存本身并没有什么不同。

这是 Webpack 配置：

new GenerateSW({
    include: [],
    runtimeCaching: [{
        urlPattern: /.*javascript.*/,
        handler: 'cacheFirst',
        options: {
            cacheName: 'js',
            cacheableResponse: {
                statuses: [0, 200],
            },
        },
    }],
}),
  • 如果这些资产没有出现在缓存中，它们是如何由 SW 交付的？
  • 是否有某种原因它们在缓存中不可见？
4

1 回答 1

0

GenerateSW 知道 webpack 捆绑的资产，并生成用于缓存这些文件的 service worker 代码。您应该在名为 workbox- precache - http://localhost:port/的缓存中找到它们。

请参阅：https ://developers.google.com/web/tools/workbox/guides/codelabs/webpack

如果您在 service worker js 文件中添加断点并检查self.__precacheManifest（使用 console.log），您还会看到为您预缓存了哪些资源。

于 2018-04-14T12:27:10.833 回答