Service Worker通过拦截网络请求实现离线访问，首先注册sw.js脚本，安装时预缓存核心资源，fetch事件中优先返回缓存资源，更新时通过版本号清除旧缓存，确保离线可用性。
Service Worker 是现代 Web 应用实现离线功能的核心技术。它是一个运行在浏览器后台的脚本，独立于网页主线程，能拦截网络请求、缓存资源并提供离线访问能力。通过合理配置，可以让网站在无网络环境下依然正常运行。
注册并安装 Service Worker
要在页面中启用 Service Worker，首先需要在主 javaScript 文件或页面脚本中注册它。注册操作通常放在页面加载时执行。
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js‘)
.then(reg => console.log(‘SW registered!’, reg))
.catch(err => console.log(‘SW registration failed’, err));
}
这段代码检查浏览器是否支持 Service Worker，如果支持，则尝试注册根目录下的 sw.js 文件。这个文件就是 Service Worker 脚本本身，需单独创建。
缓存关键资源
Service Worker 安装阶段是预缓存静态资源的最佳时机。通过监听 install 事件，可以将 html、css、JS、图片等核心文件保存到 Cache Storage 中。
立即学习“Java免费学习笔记（深入）”；
const CACHE_NAME = ‘offline-v1’;
const ASSETS = [
‘/’,
‘/index.html‘,
‘/style.css‘,
‘/app.js’,
‘/logo.png’
];
self.addEventListener(‘install’, e => {
e.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(ASSETS))
.then(() => self.skipWaiting())
);
});
caches.open() 创建一个命名缓存空间，addAll() 将列表中的资源全部加入缓存。调用 skipWaiting() 可让新 Service Worker 立即激活，避免等待旧版本退出。
拦截请求并返回缓存
当用户访问页面且网络不可用时，Service Worker 可以通过监听 fetch 事件来拦截请求，并从缓存中返回对应资源。
self.addEventListener(‘fetch’, e => {
e.respondWith(
caches.match(e.request)
.then(cached => cached || fetch(e.request))
);
});
这段逻辑优先查找缓存，命中则直接返回；未命中则发起网络请求。这样既保证了离线可用性，又能在联网时获取最新内容。
对于更复杂的策略（如网络优先或缓存优先），可按需调整判断逻辑。例如动态 API 请求适合网络优先，而静态资源更适合缓存优先。
更新缓存版本
当应用更新后，需要升级缓存内容。可以通过更改 CACHE_NAME 的版本号来触发新的安装流程。
const CACHE_NAME = ‘offline-v2’;
新版 Service Worker 安装完成后，会在下一次页面加载时激活。你也可以在 activate 事件中清理旧缓存：
self.addEventListener(‘activate’, e => {
e.waitUntil(
caches.keys().then(keys =>
promise.all(
keys.filter(key => key !== CACHE_NAME)
.map(key => caches.delete(key))
)
)
);
});
这确保只有当前版本的缓存被保留，避免存储冗余数据。
基本上就这些。只要正确注册、缓存资源、响应请求并管理版本，就能构建出可靠的离线 Web 应用。不复杂但容易忽略的是路径问题和缓存策略选择，建议开发时使用 DevTools 的 application 面板调试 Service Worker 状态和缓存内容。