ServiceWorker是什么？JS实现离线应用教程

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《Service Worker是什么？如何用JS实现离线应用？》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

Service Worker需手动注册、管理缓存并仅在HTTPS/localhost生效；注册须早于页面加载、检查支持性，经历install→waiting→active状态；fetch事件中应区分document与资源请求，结合预缓存与运行时缓存策略；缓存命名须版本化，并在activate中清理旧缓存。

Service Worker 是浏览器在后台独立于网页运行的脚本，它能拦截网络请求、缓存资源、实现离线访问——但Service Worker不是“开箱即用”的离线开关，它必须手动注册、监听fetch事件、显式管理缓存，且只在 HTTPS（或 localhost）环境下生效。

怎样正确注册 Service Worker

注册必须在页面加载早期执行，且需检查浏览器支持；注册后脚本不会立即激活，要经历 install → waiting → active 状态流转。

• navigator.serviceWorker 在非安全上下文（如 HTTP 非 localhost）中为 undefined，直接调用会报错
• 注册路径是相对于站点根目录的，比如 ./sw.js 实际请求的是 https://example.com/sw.js，不能写成 ./js/sw.js 后又在 sw.js 里用 cache.addAll(['./index.html']) —— 路径不匹配会导致缓存失败
• 每次页面刷新不会重新触发 install，除非 sw.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('SW registration failed:', err));
  });
}

如何用 fetch 事件实现离线优先策略

关键不在“缓存所有东西”，而在明确区分静态资源（可预缓存）和动态请求（需运行时缓存或回退策略）。盲目缓存 API 响应容易导致陈旧数据。

• 在 install 事件中用 cache.addAll() 预缓存核心 HTML/CSS/JS，但不要包含带查询参数的 URL（如 /api/data?ts=123）
• 在 fetch 事件中，先尝试从缓存匹配（event.request.destination !== 'document' 可区分页面导航和资源请求），未命中再发网络请求；对 destination === 'document' 的请求，建议 fallback 到缓存中的 /offline.html
• cache.match() 不支持正则或通配符，若需模糊匹配（如所有 /api/ 请求），得用 cache.keys() 遍历筛选，性能较差，应避免

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  if (event.request.destination === 'document') {
    event.respondWith(
      caches.match(event.request)
        .then(resp => resp || caches.match('/offline.html'))
    );
  } else {
    event.respondWith(
      caches.match(event.request)
        .then(resp => resp || fetch(event.request))
    );
  }
});

缓存命名与版本控制为什么不能省略

缓存名是字符串标识，没有自动版本机制。如果沿用旧缓存名（如 'v1'）并修改 cache.addAll() 列表，新 Service Worker 安装时不会自动清理旧缓存，导致磁盘占用增长、缓存混乱甚至离线失效。

• 每次变更缓存策略或资源列表，必须改用新缓存名（如 'v2-static'），并在 activate 事件中调用 caches.delete() 清理旧缓存
• 不要在 install 中直接 caches.delete()，否则可能清掉当前正在使用的缓存，导致页面白屏
• caches.keys() 返回的是 Promise，清理逻辑必须放在 activate 的 waitUntil() 内，确保清理完成后再激活

const CACHE_NAME = 'v2-static';

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

真正难的不是写几行 cache.put()，而是判断哪些请求该走缓存、哪些必须实时、哪些要降级，以及如何让缓存清理不破坏用户体验。很多离线失败，根源在于把 Service Worker 当作黑盒，却没认真处理它的生命周期和缓存语义。

以上就是《ServiceWorker是什么？JS实现离线应用教程》的详细内容，更多关于的资料请关注golang学习网公众号！