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 }); }

})());

}

});