Workbox 隐形缓存 JS 和 CSS 资源答案

【问题标题】：Workbox invisibly caching JS and CSS assetsWorkbox 隐形缓存 JS 和 CSS 资源
【发布时间】：2018-04-04 00:36:38
【问题描述】：

我正在使用 Workbox 和 Webpack 在运行时在我的站点上缓存多个资产，并通过 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 是如何交付这些资产的？
是否有某些原因它们在缓存中不可见？

【问题讨论】：

标签： google-chrome caching service-worker progressive-web-apps workbox

【解决方案1】：

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），您还会看到为您预缓存了哪些资源。

【讨论】：

是的，我找到了缓存，它只是显示为空。但是，SW 无需网络调用即可从其缓存中加载项目。我很好奇这是怎么可能的。