ServiceWorker是什么？如何实现离线访问？

Service Worker 是浏览器后台运行的事件驱动型脚本，作为现代 Web 应用实现离线体验的核心基础设施，它通过 HTTPS 注册、拦截网络请求、智能管理 Cache Storage（支持预缓存静态资源与运行时动态缓存），并配合兜底页面和灵活的缓存策略（如 stale-while-revalidate），让网页在无网络时依然流畅可用；尽管其生命周期管理严格、不支持 DOM 访问且更新机制特殊，但掌握注册、安装、激活流程及 fetch/cache API 实践，就能轻松赋予应用媲美原生的离线能力——现在就试试，让你的网站“断网也不掉线”。

Service Worker 是运行在浏览器后台的脚本，独立于网页主线程，能拦截和处理网络请求、管理缓存、推送通知，并让 Web 应用具备离线能力。

Service Worker 的核心特性

它不是普通 JS 脚本，而是一个可被注册、安装、激活的事件驱动型 worker：

• 必须通过 HTTPS（本地开发时 localhost 也允许）才能注册
• 生命周期由浏览器控制：注册 → 安装 → 激活 → 等待 → 控制页面
• 无法直接访问 DOM 或 window 对象，只能通过 postMessage 和页面通信
• 支持 fetch、cache API，是实现离线体验的关键基础设施

如何用 Service Worker 实现离线体验

关键在于“预缓存 + 运行时缓存”策略，让资源在首次加载时存入 Cache Storage，后续请求优先从缓存读取：

• 预缓存静态资源：在 install 阶段把 HTML、CSS、JS、图标等核心文件写入指定缓存（如 static-v1）
• 拦截 fetch 请求：在 fetch 事件中检查请求是否命中缓存；有则返回缓存响应，无则发起网络请求并缓存结果
• 缓存更新策略：install 阶段清旧缓存，fetch 阶段用 stale-while-revalidate 等模式平衡新鲜度与可用性
• 兜底页面：当网络不可用且缓存未命中时，返回一个离线专用 HTML 页面（如 /offline.html）

一个最小可行示例

注册 sw.js：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(reg => {
    console.log('SW registered:', reg.scope);
  });
}

sw.js 内容简版：

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

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

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

注意事项与常见陷阱

实际部署中容易踩坑：

• Service Worker 不会自动更新：新版本需用户刷新两次才生效（第一次触发更新，第二次激活）
• 缓存键区分大小写和查询参数：/api/data 和 /api/data? 是不同缓存项
• 动态路由（如 React Router）需配合 NavigationPreload 或 fallback 响应避免白屏
• 调试建议：在 Chrome DevTools 的 Application → Service Workers 标签中勾选 “Update on reload” 并使用 “Skip waiting”

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。