共计 817 个字符，预计需要花费 3 分钟才能阅读完成。
本文论述在 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 的服务器端渲染过程。
