ServiceWorker是什么？如何实现离线应用？

Service Worker 是浏览器后台运行的独立脚本，作为可编程的网络代理层，它不依赖页面生命周期，能拦截请求、智能缓存资源、支持离线访问与消息推送，是构建现代化 PWA 的核心技术；虽需 HTTPS（localhost 除外）、同源注册且无 DOM 访问权限，但通过简洁的 install/fetch 事件配合 Cache API 和 postMessage，就能轻松实现静态资源预缓存与无缝离线体验——从首次联网加载到断网即用，用户毫无感知，而掌握版本更新、缓存清理和渐进式策略升级，更能让应用真正稳定可靠。

Service Worker 是运行在浏览器后台的独立 JavaScript 脚本，它不绑定具体页面，能拦截网络请求、缓存资源、推送消息，并让网页实现真正的离线可用。它不是传统意义上的“Web Worker”，而是一个可编程的网络代理层，是构建 PWA（渐进式 Web 应用）的核心能力之一。

Service Worker 的关键特性

它有三个硬性前提：必须通过 HTTPS（本地 localhost 除外）、以 JavaScript 文件形式注册、且作用域（scope）需在同源下。它本身没有 DOM 访问权限，不能直接操作页面元素，但可通过 postMessage 和页面通信。

• 生命周期独立：安装（install）、激活（activate）、闲置（idle）、终止（terminated）——不随页面关闭而销毁
• 请求可拦截：在 fetch 事件中决定是走网络、读缓存，还是返回兜底响应
• 支持后台同步和推送：即使浏览器关闭，也能在条件满足时执行任务（需用户授权）

注册并激活一个基础 Service Worker

注册只需在主页面 JS 中调用 navigator.serviceWorker.register()，路径指向你的 SW 脚本文件：

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

注意：sw.js 必须放在网站根目录（或指定 scope），否则无法控制子路径页面。注册后，浏览器会自动触发 install 事件。

缓存静态资源，实现离线加载

在 sw.js 中监听 install 和 fetch 事件，把 HTML/CSS/JS/图片等提前存入 Cache API：

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

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

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

这样，首次联网访问后资源就被缓存；之后断网再打开页面，Service Worker 会从缓存中返回内容，用户完全无感知。

更新缓存与版本管理

Service Worker 不会自动更新已安装的脚本——改了 sw.js 文件后，只有新打开的页面才会尝试安装新版。旧版仍运行在已打开的标签页中。

• 更新缓存：修改 CACHE_NAME（如从 v1 改成 v2），新 SW 安装时创建新缓存，旧缓存可在 activate 阶段清理
• 跳过等待：在 install 后立即调用 self.skipWaiting()，让新版 SW 尽快激活
• 清理旧缓存：在 activate 事件里遍历 caches.keys()，删除非当前版本的缓存

基本上就这些。Service Worker 不复杂但容易忽略细节——比如缓存策略选错会导致白屏、忘记更新缓存名会让改动不生效、未处理动态请求会卡在 loading。从静态资源缓存起步，再逐步加入网络优先、缓存优先、Stale-while-revalidate 等策略，离线体验就稳了。

终于介绍完啦！小伙伴们，这篇关于《ServiceWorker是什么？如何实现离线应用？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！