如何利用 Service Worker 的 Cache API 实现智能的离线策略？-js教程-PHP中文网

如何利用 Service Worker 的 Cache API 实现智能的离线策略？

幻影之瞳

发布： 2025-10-06 15:16:02

原创

457人浏览过

通过Service Worker结合Cache API实现离线策略，拦截请求并优先返回缓存内容，同时在后台更新数据；2. 根据资源类型选择缓存模式：静态资源用Cache First，动态数据用Stale While Revalidate；3. 在install阶段预缓存核心文件，确保离线可访问；4. activate时清理旧缓存并接管页面；5. 网络失败时降级显示offline页面。该方案兼顾加载速度、离线可用性与数据新鲜度。

如何利用 service worker 的 cache api 实现智能的离线策略？

要实现智能的离线策略，关键在于结合 Service Worker 和 Cache API 精确控制资源的缓存与更新逻辑。核心思路是：拦截网络请求，优先服务缓存内容，并在合适时机更新缓存，从而保障离线可用性和数据新鲜度。

定义缓存策略类型

根据资源特性选择合适的缓存策略，常见模式包括：

Cache First（缓存优先）：优先读取缓存，适用于静态资源如 CSS、JS、图片等，提升加载速度并支持离线访问。
Network First（网络优先）：优先尝试网络请求，失败后使用缓存，适合动态内容如用户数据或文章列表。
Stale While Revalidate（陈旧但可更新）：立即返回缓存内容，同时后台发起请求更新缓存，兼顾响应速度和数据更新。
Cache Only：仅从缓存获取资源，适用于已明确离线使用的资源。
Network Only：强制走网络，不使用缓存，用于实时性要求极高的请求。

注册 Service Worker 并监听 fetch 事件

在页面中注册 Service Worker，并在其脚本中监听 fetch 事件，对请求进行拦截和处理。

示例代码：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

登录后复制

在 sw.js 中：

阿贝智能

阿贝智能是基于AI技术辅助创作儿童绘本、睡前故事和有声书的平台，助你创意实现、梦想成真。

查看详情

self.addEventListener('fetch', event => {
  const { request } = event;
  const url = new URL(request.url);

  // 静态资源使用缓存优先
  if (url.pathname.match(/\.(js|css|png|jpg|jpeg|gif)$/)) {
    event.respondWith(
      caches.match(request).then(cached => {
        return cached || fetch(request).then(response => {
          const responseClone = response.clone();
          caches.open('static-cache').then(cache => {
            cache.put(request, responseClone);
          });
          return response;
        });
      })
    );
  }

  // API 请求使用 Stale While Revalidate
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(
      caches.match(request).then(cached => {
        const networkFetch = fetch(request).then(response => {
          if (response.status === 200) {
            const responseClone = response.clone();
            caches.open('api-cache').then(cache => {
              cache.put(request, responseClone);
            });
          }
          return response;
        }).catch(() => cached); // 网络失败时回退到缓存

        return cached || networkFetch;
      })
    );
  }
});

登录后复制

预缓存关键资源

在 Service Worker 安装阶段，将核心资源预先缓存，确保首次离线也能访问基本页面。

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('precache-v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/main.js',
        '/style.css',
        '/offline.html'
      ]);
    })
  );
});

登录后复制

安装完成后激活并清理旧缓存：

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(
        keys.filter(key => key !== 'precache-v1')
            .map(key => caches.delete(key))
      );
    })
  );

  // 接管所有页面
  return self.clients.claim();
});

登录后复制

处理离线 fallback

当所有策略都失败时，提供友好的降级页面或占位内容。

event.respondWith(
  fetch(request).catch(() => {
    return caches.match('/offline.html') ||
           new Response('离线状态，暂无可用内容', {
                             headers: { 'Content-Type': 'text/plain' }
                           });
  })
);

登录后复制

基本上就这些。通过合理组合缓存策略、预缓存关键路径、后台更新与优雅降级，就能构建出真正智能的离线体验。

以上就是如何利用 Service Worker 的 Cache API 实现智能的离线策略？的详细内容，更多请关注php中文网其它相关文章！