Question

我正在使用Workbox和Webpack在运行时缓存我网站上的几个资产，并将其与服务工作者一起交付。我能够在缓存存储中成功查看来自外部CDN的图像，并确认它们是通过SW传送的。

但是，当谈到本地托管（同源）资产（如JS和CSS文件）时，它们的命名缓存显示为空。加载页面后，这些资产将被传递(from ServiceWorker)，并且SW没有其他网络请求。刷新缓存存储或缓存本身并没有什么区别。

这是Webpack配置：

new GenerateSW({
    include: [],
    runtimeCaching: [{
        urlPattern: /.*javascript.*/,
        handler: 'cacheFirst',
        options: {
            cacheName: 'js',
            cacheableResponse: {
                statuses: [0, 200],
            },
        },
    }],
}),

如果这些资产没有出现在缓存中，那么这些资产是如何交付的？
是否有某些原因它们在缓存中不可见？

Answer 1

GenerateSW了解webpack捆绑的资产，并生成用于缓存这些文件的服务工作者代码。您应该在名为workbox- 预先缓存 - http://localhost:port/的缓存中找到它们。

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

如果在服务工作者js文件中添加断点并检查self.__precacheManifest（使用console.log），则还会看到为您预先准备了哪些资源。

Workbox无形地缓存JS和CSS资产

1 个答案: