App Shell 离线优先缓存策略实践

概述App Shell 将应用框架与动态内容分离，适合离线优先。本文给出 SW 内预缓存与路由策略示例。预缓存与路由const SHELL = 'shell-v1'; const SHELL_URLS = ['/', '/index.html', '/app.js', '/styles.css']; self.addEventListener('install', e => { e.waitUntil(caches.open(SHELL).then(c => c.addAll(SHELL_URLS))); }); self.addEventListener('activate', e => { e.waitUntil(caches.keys().then(keys => Promise.all(keys.filter(k => k.startsWith('shell-') && k !== SHELL).map(k => caches.delete(k))))); }); self.addEventListener('fetch', event => { const url = new URL(event.request.url); if (event.request.mode === 'navigate') { event.respondWith(caches.match('/index.html').then(res => res || fetch(event.request))); } else if (url.pathname.startsWith('/api/')) { event.respondWith((async () => { try { const res = await fetch(event.request); return res; } catch { return new Response('', { status: 503 }); } })()); } });