Service Worker Cache 和 HTTP Cache 的区别

本文阐述在 Service Worker 缓存和 HTTP 缓存层中使用一致或不同的过期逻辑的优缺点。

虽然 Service Worker 和 PWA 正在成为现代 Web 应用程序的标准，但资源缓存已变得比以往任何时候都更加复杂。 对于前端开发者来说，有必要了解 Service Worker 缓存和 HTTP 缓存的用例和区别，以及与常规 HTTP 缓存策略相比，不同 Service Worker 缓存过期策略的优缺点。

概括地说，浏览器在请求资源时遵循以下缓存顺序：

(1) Service Worker 缓存：Service Worker 检查资源是否在其缓存中，并根据其编程的缓存策略决定是否返回资源本身。 请注意，这不会自动发生。 您需要在服务工作者中创建一个 fetch 事件处理程序并拦截网络请求，以便从服务工作者的缓存而不是网络提供请求。

(2) HTTP缓存（也称为浏览器缓存）：如果资源在HTTP缓存中找到并且还没有过期，浏览器会自动使用HTTP缓存中的资源。

(3) 服务器端：如果在 service worker 缓存或 HTTP 缓存中没有找到，浏览器会去网络请求资源。 如果资源没有缓存在 CDN 中，则请求必须一直返回到源服务器。

Service worker caching

Service Worker 拦截网络类型的 HTTP 请求，并使用缓存策略来确定应将哪些资源返回给浏览器。 Service Worker 缓存和 HTTP 缓存具有相同的通用目的，但 Service Worker 缓存提供了更多缓存功能，例如对缓存内容和缓存方式的细粒度控制。

Service Worker 使用事件侦听器（通常是 fetch 事件）拦截 HTTP 请求。 下列代码片段演示了 Cache-First 缓存策略的逻辑。

对于 SAP 电商云 Spartacus UI 来说，一旦以 PWA 模式安装了 Spartacus，就会安装一个 service worker，它会提供 index.html 的缓存版本以及 js 文件。 这会导致完全跳过 Spartacus 的服务器端渲染过程。