什么是javascript的service workers_它们如何实现离线功能_技术教程

Service Worker 是运行在浏览器后台、独立于主线程的 JavaScript 脚本，用于拦截请求、管理缓存、推送通知并实现离线体验；它不是普通页面脚本（无法操作 DOM），也不是服务器端 Node.js 服务。

Service Worker 是一段运行在浏览器后台的 JavaScript 脚本，独立于网页主线程，能拦截和处理网络请求、管理缓存、推送通知，并实现真正的离线体验。

Service Worker 是什么？不是什么？

它不是普通页面脚本，不能直接操作 DOM；也不是 Node.js 服务，不运行在服务器上。它是一个受控的、事件驱动的代理层，生命周期由浏览器管理——注册后需等待安装（install）、激活（activate），之后才能监听 fetch 事件。

必须通过 HTTPS（localhost 除外）才能注册，否则 navigator.serviceWorker.register() 会静默失败
作用域默认为注册脚本所在路径，想控制整个站点？注册时传入 {scope: '/'}
每次页面加载不会重新执行 SW 全局代码，而是复用已激活的实例——所以 console.log 在 SW 文件里可能只出现一次

如何用 fetch + Cache API 实现离线访问

核心逻辑是：在 install 阶段预缓存关键资源，在 fetch 阶段优先从缓存读取，回退到网络。不是“一键离线”，而是你明确决定哪些资源可离线使用。

cache.addAll() 只接受 URL 字符串数组，不支持 glob 或正则；路径必须精确匹配后续 fetch 请求的 request.url
缓存名建议带版本号（如 'static-v1'），避免旧缓存污染；升级 SW 时，旧缓存不会自动删除，得在 activate 里手动清理
对 HTML 文件，通常不建议全量缓存（因内容易变），更稳妥的做法是用 Stale-While-Revalidate 策略：先返回缓存，再后台更新

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

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

常见离线失败原因

用户点开页面显示 “You are offline” 并不等于 Service Worker 没生效——很可能只是缓存没命中或策略写错了。

打开 DevTools → Application → Service Workers，确认状态是 activated and is running；若显示 waiting，说明有新版本未激活，可点击 Skip Waiting
检查 caches.keys() 是否真有缓存项（在 Console 里执行）；如果 caches.match() 返回 undefined，八成是 URL 不一致（比如带了 query 参数、大小写差异、末尾斜杠缺失）
导航请求（即
地址栏输入或链接跳转）默认触发 fetch 事件，但某些资源（如的 src）也可能被拦截——别忘了处理 404 场景，否则离线时图片直接挂掉