Service Worker是实现JavaScript离线应用的核心，它作为独立于主线程的后台脚本，通过注册、安装、激活生命周期拦截fetch请求并管理缓存，从而支持无网络访问。
JavaScript 实现离线应用的核心是 Service Worker——它是一个运行在浏览器后台、独立于网页主线程的脚本，能拦截网络请求、缓存资源、控制页面加载逻辑，从而让 Web 应用在无网络时仍可正常访问。
Service Worker 的基本工作原理
Service Worker 本质是一个事件驱动的代理脚本，生命周期与页面解耦。它不会自动运行，需先注册；注册后会被安装（install），然后激活（activate），之后才能接管页面的 fetch 请求。
- 注册：在主页面 JS 中调用
navigator.serviceWorker.register('./sw.js')，浏览器会下载并尝试安装该脚本 - 安装：触发
install事件，常在此阶段用cache.addAll()预缓存核心静态资源（如 HTML、CSS、JS、图标） - 激活：安装成功后进入等待态，关闭所有旧 Tab 后才会激活；此时可清理旧缓存（
cache.delete()） - 拦截请求：激活后监听
fetch事件，可决定返回缓存、发起网络请求，或两者结合（如缓存优先 + 后台更新）
实现一个基础离线可用的 Service Worker
以下是最简可行示例，支持首次加载后离线打开首页：
// sw.js
const CACHE_NAME = 'v1';
const CORE_FILES = [
'/',
'/index.html',
'/style.css',
'/app.js',
'/logo.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(CORE_FILES))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
注意：caches.match() 默认只匹配 GET 请求，且需确保请求 URL 完全一致（含查询参数）。若需更灵活匹配，可用 cache.keys() 或自定义匹配逻辑。
立即学习“Java免费学习笔记（深入）”；
关键限制和注意事项
Service Worker 有明确约束，绕不开但必须清楚：
- 只能在 HTTPS（或 localhost）下注册，生产环境不可用 HTTP
- 没有 DOM 访问权限（
self.document不存在），不能直接操作页面元素 - 不能使用同步 API（如
localStorage、XMLHttpRequest），推荐用IndexedDB或Cache API - 生命周期由浏览器控制，可能被终止或重启，不适合长期运行任务（如轮询）
- 缓存策略需主动管理——不清理旧缓存会导致磁盘占用持续增长
进阶技巧：缓存策略与更新机制
真实项目中，建议按资源类型选择不同策略：
- 静态资源（JS/CSS/图片）：版本化缓存 + 激活时清理旧版
- HTML 页面：采用“网络优先，失败回退缓存”（network-first fallback），避免因 HTML 缓存导致功能错乱
- API 数据：可缓存但设较短 TTL，或用 Stale-While-Revalidate 模式（先返回缓存，再后台更新）
- 强制更新 SW：修改 sw.js 文件内容（哪怕加个空格），浏览器会自动下载新版本并触发 install → activate 流程
基本上就这些。Service Worker 不复杂但容易忽略细节，重点是理解它的生命周期和缓存控制权——它不是自动帮你离线，而是给你一套可编程的离线能力。
