注册Service Worker并缓存资源，实现离线访问：在主页面注册sw.js，安装时缓存核心文件，通过fetch事件优先返回缓存内容，更新时清除旧缓存，确保用户可离线浏览已加载的页面。
利用JavaScript的Service Worker实现离线缓存，核心在于注册一个后台运行的脚本，拦截网络请求并返回预先缓存的资源。只要用户首次访问过页面，后续即使断网也能看到内容。
注册并安装Service Worker
在主页面中注册Service Worker脚本，通常是sw.js或service-worker.js：
说明： 浏览器检查该文件是否存在，若存在则安装并在后台运行。
代码示例（main.js 或内联脚本）：
// 确保在 HTTPS 环境下运行，本地开发可使用 localhost
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered:', reg))
.catch(err => console.log('SW registration failed:', err));
}
缓存关键资源
在sw.js中监听install事件，将HTML、CSS、JS、图片等静态资源添加到Cache Storage。
立即学习“Java免费学习笔记（深入）”；
建议做法：
- 定义一个缓存名称和需要缓存的资源列表
- 使用caches.open()创建缓存空间
- 用cache.addAll()批量缓存资源
sw.js 示例代码：
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())
);
});
拦截请求并返回缓存
通过监听fetch事件，判断资源是否已缓存，优先返回缓存内容，否则发起网络请求。
常用策略： 先查缓存，无则走网络，网络失败再回退到备用资源或离线页。
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request)
.then(cached => cached || fetch(e.request))
);
});
增强版逻辑： 对动态资源尝试网络优先，静态资源使用缓存优先。
更新缓存版本
当资源更新时，需升级缓存策略，避免用户一直使用旧版本。
处理方式：
- 修改CACHE_NAME（如改为'offline-v2'）
- 在activate事件中清理旧缓存
self.addEventListener('activate', e => {
e.waitUntil(
caches.keys().then(keys =>
Promise.all(
keys.filter(key => key !== CACHE_NAME)
.map(key => caches.delete(key))
)
)
);
});
基本上就这些。Service Worker配合Cache API能有效实现离线访问，适合文档类、展示型站点。注意路径正确、作用域合理，并在浏览器开发者工具中查看缓存状态调试问题。
