Service Worker是PWA离线核心，通过注册sw.js实现。先缓存静态资源确保离线访问，再拦截fetch请求优先返回缓存，最后更新版本时清理旧缓存，配合manifest.json和HTTPS使Web应用具备原生体验。
要实现一个离线可用的PWA（渐进式Web应用），Service Worker 是核心机制。它是一个运行在浏览器后台的脚本，独立于网页主线程，能拦截网络请求、缓存资源并提供离线访问能力。
注册 Service Worker
在页面加载时注册 Service Worker，告诉浏览器启用该服务。
示例代码：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker 注册成功:', registration.scope);
})
.catch(error => {
console.log('Service Worker 注册失败:', error);
});
});
}
这段代码检查浏览器是否支持 Service Worker，如果支持，则在页面加载完成后注册 sw.js 文件作为服务工作线程。
缓存静态资源
在 sw.js 中监听 install 事件，预缓存关键资源，如 HTML、CSS、JS、图片等，确保离线时仍可访问。
立即学习“Java免费学习笔记（深入）”；
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/styles/main.css',
'/scripts/app.js',
'/images/logo.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
);
});
当 Service Worker 安装时，会打开指定缓存并添加所有资源。若任一文件下载失败，安装将失败，保证缓存完整性。
拦截请求并返回缓存内容
通过监听 fetch 事件，判断资源是否已缓存，优先从缓存中返回，否则发起网络请求。
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
这个策略称为“缓存优先”，适合静态资源。对于动态内容，可采用“网络优先”或“缓存优先+后台更新”等策略。
更新缓存版本
当应用更新时，需升级缓存。通过更改 CACHE_NAME 并在 activate 事件中清理旧缓存实现。
const CACHE_NAME = 'my-pwa-cache-v2'; // 版本更新
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (!cacheWhitelist.includes(cacheName)) {
return caches.delete(cacheName);
}
})
);
})
);
});
activate 事件在新 Service Worker 激活时触发，清除不再需要的旧缓存，避免占用用户存储空间。
基本上就这些。配合 manifest.json 和 HTTPS 环境，你的 Web 应用就能像原生应用一样离线运行、添加到主屏幕，真正成为 PWA。关键是合理设计缓存策略，保障用户体验一致性。
