javascript的service worker是什么_它如何启用离线体验和后台同步【教程】

Service Worker 是运行在浏览器后台、独立于主线程的脚本，可拦截请求、缓存资源、接收推送和触发后台同步，但无法访问 DOM 或 localStorage；注册需 HTTPS（或 localhost），通过 navigator.serviceWorker.register() 实现，且 sw.js 必须同源；常用 fetch 事件实现离线优先策略，install 事件预缓存静态资源，sync 事件需用户添加到主屏幕后才可能生效。

Service Worker 是什么：一个运行在浏览器后台的脚本

它不是普通 JS 脚本，而是一个独立于网页主线程的 Worker，生命周期由浏览器管理。它不能直接访问 DOM，也不能读写 localStorage 或 document.cookie。它的核心能力是拦截网络请求、缓存资源、接收推送、触发后台同步——这些正是离线和后台能力的基础。

注册 Service Worker 的关键条件和常见失败点

注册必须在 HTTPS（或 localhost）环境下进行；否则 navigator.serviceWorker.register() 会静默失败或抛出 SecurityError。注册后，浏览器会下载、解析、安装该脚本，但不会立即激活——只有当所有已打开页面关闭或刷新后，新版本才会接管。

• 注册代码必须放在主页面 JS 中，且建议加错误捕获：

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
      .catch(err => console.error('SW registration failed:', err));
  }

• sw.js 必须与注册页面同源，且路径要正确（相对

  

  路径以站点根目录为基准）
• 开发时频繁修改 SW 后，Chrome DevTools 的 Application > Service Workers 面板中勾选 Update on reload，否则浏览器可能复用旧缓存

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

在 SW 脚本中监听 fetch 事件，决定每个网络请求是走网络、走缓存，还是两者结合。典型模式是「缓存优先，回退网络」，适合静态资源；「网络优先，缓存后备」更适合动态内容（如 API 响应）。

• 缓存静态资源（HTML/CSS/JS）推荐用 Cache API + install 事件预缓存：

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

• 拦截页面请求并尝试从缓存读取：

  self.addEventListener('fetch', event => {
    if (event.request.destination === 'document') {
      event.respondWith(
        caches.match(event.request).then(cached => cached || fetch(event.request))
      );
    }
  });

• 注意：未显式匹配的请求（比如跨域图片、第三方字体）默认仍走网络；若需拦截，需检查 event.request.mode === 'cors' 等条件

用 sync 事件实现后台同步（需用户授权）

后台同步依赖 SyncManager 和 serviceWorkerRegistration.sync.register()，但它不是“随时能执行”，而是由浏览器在设备联网、空闲、充电等条件下触发。更重要的是：它只在用户明确授予 background-sync 权限后才可用——现代 Chrome 已默认拒绝该权限，除非网站被添加到主屏幕（beforeinstallprompt 触发后引导用户）。

• 注册 sync 事件前，先检查权限：

  navigator.serviceWorker.ready.then(reg => {
    reg.sync.register('submit-form-data').catch(err => {
      console.warn('Sync registration failed:', err);
    });
  });

• 在 SW 中监听：

  self.addEventListener('sync', event => {
    if (event.tag === 'submit-form-data') {
      event.waitUntil(handleFormDataSync());
    }
  });

• handleFormDataSync() 必须是幂等操作（重复执行不产生副作用），因为浏览器可能多次触发同一 tag

真正难的不是写代码，而是让用户点那个「添加到主屏幕」弹窗——没这一步，sync 几乎不会生效。别指望它像定时任务一样稳定运行。