Cache Storage 多层缓存（静态/动态/API）分层策略实践

概述分层缓存能针对不同资源选择最优策略。本文给出分层命名与路由示例。命名与路由const C_STATIC = 'static-v1';

const C_DYNAMIC = 'dynamic-v1';

const C_API = 'api-v1';

self.addEventListener('fetch', event => {

const url = new URL(event.request.url);

if (url.pathname.startsWith('/assets/')) event.respondWith(cacheFirst(event, C_STATIC));

else if (url.pathname.startsWith('/page/')) event.respondWith(staleWhileRevalidate(event, C_DYNAMIC));

else if (url.pathname.startsWith('/api/')) event.respondWith(networkFirst(event, C_API));

});