javascript - Service Worker 和两个缓存

Question

我一直假设（虽然没有看到它明确说明）以下是安装服务工作者时 HTTPS 请求的路径：

1. 浏览器遇到带有 URL 的图像。发起 HTTPS 请求。
2. 请求通过“内部”缓存，如果有资源，它将返回资源，除非在开发工具中选中“禁用缓存”。
3. 请求作为 fetch 事件发送给服务工作者。在那里，您的自定义代码可以查询您的自定义缓存并查看资源是否已存储在那里，并将其返回。如果没有，您可以将请求转发到网络。（不确定“禁用缓存”是否在这里有任何影响）。

只是希望有人可以确认这是它的工作原理。

标签： javascriptservice-workerbrowser-cache

Answer 1

如果使用“内部缓存”是指浏览器缓存，则在访问 Service Worker 缓存后访问它（您需要将第 2 点与第 3 点交换）。
如果设置disable cache，这将只影响浏览器缓存，而不影响 Service Worker。到达这一点的请求，意味着在 Service Worker 缓存中找不到匹配项，将直接到达服务器端。

在使用 Service Worker 实现缓存策略时，您可以将浏览器缓存视为备用缓存。

您可以在下面找到执行 HTTP 请求时遵循的缓存顺序。
您还可以阅读web.dev 文章，详细解释这一点。