// 缓存名称 - 更改版本号可以强制更新缓存 const CACHE_NAME = 'app-cache-v1742913244689'; const ASSETS_PATTERN = /\/assets\//; // 需要缓存的资源列表 const urlsToCache = [ '/', '/index.html' // 其他重要的静态资源可以在这里列出 ]; // Service Worker 安装事件 self.addEventListener('install', (event) => { event.waitUntil( caches.open(CACHE_NAME) .then((cache) => { console.log('缓存已打开'); return cache.addAll(urlsToCache); }) .then(() => { // 强制激活当前 Service Worker,不等待旧的关闭 return self.skipWaiting(); }) ); }); // Service Worker 激活事件 - 清理旧缓存 self.addEventListener('activate', (event) => { event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames.map((cacheName) => { if (cacheName !== CACHE_NAME) { console.log('删除旧缓存:', cacheName); return caches.delete(cacheName); } }) ); }).then(() => { // 立即接管所有页面 return self.clients.claim(); }) ); }); self.addEventListener('fetch', (event) => { // 只缓存 assets 目录下的文件 if (ASSETS_PATTERN.test(event.request.url)) { event.respondWith( caches.match(event.request).then((cachedResponse) => { // 返回缓存的响应(如果存在) if (cachedResponse) { return cachedResponse; } // 否则发起网络请求 return fetch(event.request).then((response) => { // 检查是否获得了有效响应 if (!response || response.status !== 200 || response.type !== 'basic') { return response; } // 克隆响应,因为响应是流,只能使用一次 const responseToCache = response.clone(); caches.open(CACHE_NAME).then((cache) => { cache.put(event.request, responseToCache); }); return response; }); }) ); } else { // 对于非assets文件,使用网络优先策略 event.respondWith( fetch(event.request).catch(() => { return caches.match(event.request); }) ); } }); // 接收更新消息 //用于处理从主线程(网页)发送到 Service Worker 的消息 self.addEventListener('message', (event) => { //如果消息类型为 SKIP_WAITING,则允许新安装的 Service Worker 立即激活,而不必等待已打开的页面关闭。 if (event.data && event.data.type === 'SKIP_WAITING') { self.skipWaiting(); } });