Service Worker缓存策略与离线存储实践

Service Worker缓存策略与离线存储实践概述Service Worker作为现代Web应用的核心技术之一，为开发者提供了强大的网络拦截和缓存控制能力。通过合理配置缓存策略，可以显著提升应用的加载速度和离线使用体验。核心概念Service Worker生命周期Service Worker的生命周期包含以下几个关键阶段：注册阶段：浏览器下载并解析Service Worker脚本安装阶段：触发install事件，进行资源预缓存激活阶段：触发activate事件，清理旧缓存运行阶段：拦截网络请求，实现缓存策略缓存策略类型1. 缓存优先策略 (Cache First)self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) .then((response) => { return response || fetch(event.request); }) ); }); 2. 网络优先策略 (Network First)self.addEventListener('fetch', (event) => { event.respondWith( fetch(event.request) .catch(() => { return caches.match(event.request); }) ); }); 3. 缓存更新策略 (Cache with Network Update)self.addEventListener('fetch', (event) => { event.respondWith( caches.open(CACHE_NAME) .then((cache) => { return cache.match(event.request) .then((response) => { const fetchPromise = fetch(event.request).then((networkResponse) => { cache.put(event.request, networkResponse.clone()); return networkResponse; }); return response || fetchPromise; }); }) ); }); 实践应用基础配置const CACHE_NAME = 'v1'; const urlsToCache = [ '/', '/styles/main.css', '/script/main.js', '/offline.html' ]; // 安装事件 self.addEventListener('install', (event) => { event.waitUntil( caches.open(CACHE_NAME) .then((cache) => { return cache.addAll(urlsToCache); }) ); }); // 激活事件 self.addEventListener('activate', (event) => { event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames.map((cacheName) => { if (cacheName !== CACHE_NAME) { return caches.delete(cacheName); } }) ); }) ); }); 智能缓存策略// 根据资源类型选择不同策略 self.addEventListener('fetch', (event) => { const { request } = event; const url = new URL(request.url); // API请求使用网络优先 if (url.pathname.startsWith('/api/')) { event.respondWith(networkFirstStrategy(request)); } // 静态资源使用缓存优先 else if (request.destination === 'image' || request.destination === 'style' || request.destination === 'script') { event.respondWith(cacheFirstStrategy(request)); } // 其他请求使用混合策略 else { event.respondWith(staleWhileRevalidateStrategy(request)); } }); // 网络优先策略 async function networkFirstStrategy(request) { try { const networkResponse = await fetch(request); if (networkResponse.ok) { const cache = await caches.open(CACHE_NAME); cache.put(request, networkResponse.clone()); } return networkResponse; } catch (error) { const cachedResponse = await caches.match(request); return cachedResponse || new Response('网络错误', { status: 408 }); } } // 缓存优先策略 async function cacheFirstStrategy(request) { const cachedResponse = await caches.match(request); if (cachedResponse) { return cachedResponse; } try { const networkResponse = await fetch(request); if (networkResponse.ok) { const cache = await caches.open(CACHE_NAME); cache.put(request, networkResponse.clone()); } return networkResponse; } catch (error) { return new Response('资源不可用', { status: 503 }); } } // 缓存更新策略 async function staleWhileRevalidateStrategy(request) { const cache = await caches.open(CACHE_NAME); const cachedResponse = await cache.match(request); const fetchPromise = fetch(request).then((networkResponse) => { if (networkResponse.ok) { cache.put(request, networkResponse.clone()); } return networkResponse; }); return cachedResponse || fetchPromise; } 缓存版本管理// 版本控制 const VERSION = 'v2.0.0'; const CACHE_PREFIX = 'my-app-'; const CACHE_NAME = `${CACHE_PREFIX}${VERSION}`; // 清理旧版本缓存 self.addEventListener('activate', (event) => { event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames.map((cacheName) => { if (cacheName.startsWith(CACHE_PREFIX) && cacheName !== CACHE_NAME) { return caches.delete(cacheName); } }) ); }) ); }); 性能优化缓存大小控制const MAX_CACHE_SIZE = 50; // MB async function trimCache(cacheName, maxItems) { const cache = await caches.open(cacheName); const requests = await cache.keys(); if (requests.length > maxItems) { const requestsToDelete = requests.slice(0, requests.length - maxItems); await Promise.all(requestsToDelete.map((request) => cache.delete(request))); } } 智能预缓存// 根据用户行为预缓存 self.addEventListener('message', (event) => { if (event.data.type === 'PRECACHE_URLS') { const urlsToPrecache = event.data.urls; event.waitUntil( caches.open(CACHE_NAME) .then((cache) => { return cache.addAll(urlsToPrecache); }) ); } }); 错误处理离线页面处理self.addEventListener('fetch', (event) => { event.respondWith( fetch(event.request) .catch(() => { return caches.match('/offline.html'); }) ); }); 网络超时处理function fetchWithTimeout(request, timeout = 5000) { return Promise.race([ fetch(request), new Promise((_, reject) => setTimeout(() => reject(new Error('Request timeout')), timeout) ) ]); } 最佳实践1. 渐进式增强始终确保Service Worker是渐进式增强，不影响基本功能。2. 缓存策略选择静态资源：缓存优先API请求：网络优先关键资源：缓存更新非关键资源：网络优先3. 版本管理使用语义化版本控制，确保缓存更新的可控性。4. 错误处理完善的错误处理机制，确保离线体验的一致性。5. 性能监控监控缓存命中率和网络性能，持续优化策略。总结Service Worker缓存策略是构建现代Web应用的重要组成部分。通过合理选择和配置缓存策略，可以显著提升应用的性能和用户体验。在实际应用中，需要根据具体的业务需求和资源特性，选择最适合的缓存策略组合。