这篇文章解释了在ServiceWorker缓存和HTTP缓存层使用一致或不同的过期逻辑的优缺点。虽然ServiceWorkers和PWA正在成为现代Web应用程序的标准，但资源缓存变得比以往任何时候都更加复杂。对于前端开发者来说，有必要了解ServiceWorker缓存和HTTP缓存的用例和区别，以及不同ServiceWorker缓存过期策略相对于常规HTTP缓存策略的优缺点。简而言之，浏览器在请求资源时遵循以下缓存顺序：(1)ServiceWorker缓存：ServiceWorker检查资源是否在其缓存中，并根据其编程的缓存策略决定是否自行返回资源。请注意，这不会自动发生。您需要在serviceworker中创建一个fetch事件处理程序并拦截网络请求，以便从serviceworker的缓存而不是网络中为它们提供服务。(2)HTTP缓存（也称浏览器缓存）：如果在HTTP缓存中找到资源，并且没有过期，浏览器会自动使用HTTP缓存中的资源。(3)Server端：如果在serviceworker缓存或者HTTP缓存中没有找到，浏览器就会去网络请求资源。如果资源未缓存在CDN中，则请求必须一路返回到源服务器。ServiceWorker缓存ServiceWorker拦截Web类型的HTTP请求，并使用缓存策略来确定应将哪些资源返回给浏览器。ServiceWorker缓存和HTTP缓存服务于相同的通用目的，但ServiceWorker缓存提供了额外的缓存功能，例如对缓存内容和缓存方式的细粒度控制。ServiceWorkers使用事件侦听器（通常是fetch事件）拦截HTTP请求。以下代码片段演示了Cache-First缓存策略的逻辑。对于SAP电商云SpartacusUI，一旦Spartacus以PWA方式安装，就会安装一个serviceworker，它会提供一个缓存版本的index.html和js文件。这会导致Spartacus的服务器端渲染过程被完全跳过。
