PWA缓存控制和版本升级实践

最新推荐文章于 2025-05-08 09:32:16 发布

梅花十三儿

最新推荐文章于 2025-05-08 09:32:16 发布

阅读量637

点赞数

文章标签：缓存 javascript 前端

本文链接：https://blog.csdn.net/Android062005/article/details/125182969

版权

本文探讨了PWA中的缓存控制，详细解释了如何利用service worker的fetch事件监听器实现资源缓存，并提供了最佳实践。文章还介绍了service worker的升级过程，包括更新service-worker、删除旧缓存及版本升级中的注意事项，强调了版本号排序的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PWA是会注册一个service-worker的，每次任何被 service worker 控制的资源被请求到时，都会触发 fetch 事件，这些资源包括了指定的 scope 内的文档，和这些文档内引用的其他任何资源（比如 index.html 发起了一个跨域的请求来嵌入一个图片，这个也会通过 service worker 。）

缓存

技术依据

file

我们可以给 service worker 添加一个 fetch 的事件监听器，接着调用 event 上的 respondWith() 方法来劫持我们的 HTTP 响应，然后你用可以用自己的方法来更新他们。

在任何情况下我们只是简单的响应这些缓存中的 url 和网络请求匹配的资源，比如下面的例子：

this.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
  );
});

caches.match(event.request) 允许我们对网络请求的资源和 cache 里可获取的资源进行匹配，查看是否缓存中有相应的资源。这个匹配通过 url 和 vary header进行，就像正常的 http 请求一样，如果没有在缓存中找到匹配的资源，你可以告诉浏览器对着资源直接去 fetch 默认的网络请求。

fetch(event.reque

最低0.47元/天解锁文章