JavaScript 中 Service Worker 怎么实现离线缓存策略-js教程-PHP中文网

service worker 实现离线缓存需手动注册并管理，核心是通过 install 预缓存静态资源、activate 清理旧缓存、fetch 拦截请求并按策略响应；必须 https/localhost 环境，作用域正确，且需显式声明缓存规则。

javascript 中 service worker 怎么实现离线缓存策略

Service Worker 实现离线缓存，核心是通过拦截网络请求（fetch事件），结合 Cache API 管理资源，并配合生命周期事件（install、activate）完成预加载与版本清理。它不是自动生效的“开关”，而是需要你明确声明：缓存哪些资源、何时缓存、怎么响应请求。

注册 Service Worker 并确保作用域正确

必须在页面加载完成后注册，且脚本需部署在 HTTPS 或 localhost 下：

检查浏览器支持：'serviceWorker' in navigator
注册路径建议为根目录（如 /sw.js），这样作用域默认覆盖整个站点，避免子路径请求无法被拦截
注册后不会立即生效；新版本需等旧 Service Worker 退出控制（所有页面关闭或调用 skipWaiting()）

安装阶段预缓存关键静态资源

在 install 事件中把 HTML、CSS、JS、图标等核心文件一次性存入缓存，这是离线可用的基础：

使用 event.waitUntil() 阻塞安装流程，直到缓存完成，防止安装失败
缓存名建议带版本号（如 'rete-cache-v2'），便于后续更新识别
缓存列表应包含入口页（'/'）、主样式、主脚本、基础图标等，不建议缓存动态 API 或用户数据

示例代码片段：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

  const CACHE_NAME = 'editor-core-v1';
  const ASSETS = ['/', '/index.html', '/dist/main.js', '/styles/app.css'];
  self.addEventListener('install', e => {
    e.waitUntil(
      caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
    );
  });

激活阶段清理旧缓存

每次更新 Service Worker 脚本时，新版本会进入 waiting 状态；一旦激活，应主动删除不再使用的缓存，防止存储膨胀：

在 activate 事件中遍历 caches.keys()
过滤出非当前版本的缓存名，逐个调用 caches.delete()
也可在此阶段调用 clients.claim()，让新 SW 立即接管当前页面（跳过 waiting）

fetch 事件中选择合适缓存策略

这是决定“离线时能否打开页面”和“联网时是否及时更新”的关键。不同资源适用不同策略：

缓存优先（Cache First）：适合 logo、字体、框架 JS 等极少变动的静态资源
→ 先查缓存，命中则返回；未命中再发网络请求，并把响应存入缓存
网络优先（Network First）：适合用户项目数据、API 接口等强时效内容
→ 先发网络请求，成功则返回；失败时回退到缓存（保证离线可读，但可能略旧）
仅缓存（Stale-while-revalidate）：适合首页 HTML 等需快速展示又希望后台更新的内容
→ 立即返回缓存，同时发起网络请求并更新缓存，下次访问更及时

简单缓存优先实现：

  self.addEventListener('fetch', e => {
    e.respondWith(
      caches.match(e.request)
        .then(resp => resp || fetch(e.request))
    );
  });