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

service worker需分四阶段落地：注册（根目录sw.js、load后执行）、安装（预缓存关键资源并skipwaiting）、激活（清理旧缓存）、fetch（缓存优先策略）。

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

Service Worker 是浏览器提供的后台脚本，能拦截请求、管理缓存、实现离线访问。要让它真正生效，不能只注册就完事，得配合清晰的缓存策略分阶段落地：注册控制作用域、安装预缓存静态资源、激活清理旧缓存、fetch 阶段按需响应。

注册 Service Worker 要放在根目录且监听 load

注册必须在页面加载完成后进行，确保 DOM 就绪；脚本路径推荐设为 /sw.js，这样作用域覆盖整个站点。如果放在 /assets/sw.js，它就只能拦截 /assets/ 下的请求，核心 HTML 和 JS 就无法被控制。

代码示例：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW registered:', reg.scope))
      .catch(err => console.error('Registration failed:', err));
  });
}

安装阶段预缓存核心静态资源

在 install 事件里打开指定名称的缓存（如 'v1'），把 HTML、CSS、JS、图标等关键文件一次性加入。这些资源是离线可用的基础，首次访问就会存入 Cache Storage。

注意两点：

用 event.waitUntil() 包裹异步操作，防止安装中途退出
调用 self.skipWaiting() 让新 SW 立即激活，避免用户刷新后仍用旧版

示例片段：

const CACHE_NAME = 'v1';
const PRECACHE_URLS = ['/', '/index.html', '/app.js', '/style.css', '/logo.png'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(PRECACHE_URLS))
      .then(() => self.skipWaiting())
  );
});

PCO CLI - Planning Center Services

通过PCO Services API 管理 Planning Center Services 数据的 CLI 工具，包含计划、团队、歌曲和排班人员。

下载

激活阶段清理过期缓存版本

每次更新 SW 脚本时，缓存名通常会变（比如从 v1 改成 v2）。在 activate 事件中，遍历所有缓存名，把不匹配当前版本的全部删掉，防止磁盘空间被无效缓存占满。

常见写法：

self.addEventListener('activate', event => {
  const expectedCaches = ['v2'];
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys.filter(key => !expectedCaches.includes(key)).map(key => caches.delete(key))
      )
    )
  );
});

fetch 事件中实现缓存优先策略

这是离线功能的核心逻辑。监听 fetch 事件，对每个请求先查缓存；命中就直接返回，没命中再发网络请求，并记得 .clone() 响应体以便同时存入缓存和返回给页面（因为 Response 流只能读一次）。

典型模式（缓存优先）：

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request).then(res => {
        caches.open(CACHE_NAME).then(cache => cache.put(event.request, res.clone()));
        return res;
      }))
  );
});

可根据资源类型灵活调整策略：静态资源用缓存优先，API 接口可改用网络优先+缓存后备，避免数据陈旧。