JavaScript服务工作者_ServiceWorker缓存-js教程-PHP中文网

JavaScript服务工作者_ServiceWorker缓存

betcha

发布： 2025-11-29 21:11:13

原创

691人浏览过

Service Worker通过缓存策略提升性能，支持缓存优先、网络优先和 stale-while-revalidate 模式，结合 install、activate、fetch 生命周期实现资源预缓存、旧缓存清理与请求拦截，确保离线访问与数据更新平衡。

javascript服务工作者_serviceworker缓存

Service Worker 是一种运行在浏览器后台的脚本，独立于网页主线程，能够实现资源缓存、离线访问、消息推送等功能。其中最常用的能力之一就是缓存管理，通过它你可以控制页面加载时从网络还是缓存中获取资源，从而显著提升性能和用户体验。

Service Worker 缓存的基本原理

Service Worker 本质上是一个可编程的网络代理，可以拦截和处理页面发出的网络请求。你可以在其中定义缓存策略，决定哪些资源需要缓存、如何更新缓存、以及在离线时如何响应请求。

关键点包括：

注册并安装 Service Worker 后，它会监听 fetch 事件来拦截网络请求
使用 Cache API 存储和读取请求/响应对
支持多种缓存策略：缓存优先、网络优先、网络回退到缓存等

常见的缓存策略实现方式

根据不同的业务需求，可以选择合适的缓存策略。以下是几种典型模式：

立即学习“Java免费学习笔记（深入）”；

1. 缓存优先（Cache First）

优先从缓存读取资源，只有缓存中没有才发起网络请求。适合静态资源如图片、CSS、JS 文件。

AIBox 一站式AI创作平台

AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

217

查看详情

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      return cachedResponse || fetch(event.request);
    })
  );
});

登录后复制

2. 网络优先（Network First）

总是尝试从网络获取最新内容，失败时再使用缓存。适合动态内容如用户数据。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request).catch(() => {
      return caches.match(event.request);
    })
  );
});

登录后复制

3. 缓存+网络并行（Stale-While-Revalidate）

先返回缓存内容（即使过期），同时发起网络请求更新缓存。兼顾速度与数据新鲜度。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      const fetched = fetch(event.request).then((networkResponse) => {
        if (networkResponse) {
          caches.open('dynamic-cache').then((cache) => {
            cache.put(event.request, networkResponse.clone());
          });
        }
        return networkResponse;
      }).catch(() => cached);

      return cached || fetched;
    })
  );
});

登录后复制

生命周期与缓存管理

理解 Service Worker 的生命周期对正确管理缓存至关重要。主要阶段包括：

install：安装阶段，通常在这里预缓存核心资源
activate：激活阶段，可用于清理旧缓存，避免占用过多空间
fetch：每次网络请求都会触发，用于动态缓存或返回缓存内容

示例：在 activate 阶段清除过期缓存

self.addEventListener('activate', (event) => {
  const currentCaches = ['static-v2', 'dynamic-cache'];
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (!currentCaches.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

登录后复制

基本上就这些。合理利用 Service Worker 的缓存机制，能让你的 Web 应用更快速、更可靠，尤其是在网络不稳定的情况下表现更佳。不复杂但容易忽略的是缓存版本管理和更新逻辑，务必确保用户能及时获取新内容。

以上就是JavaScript服务工作者_ServiceWorker缓存的详细内容，更多请关注php中文网其它相关文章！