Service Worker Cache Key 正规化与 URL 标准化实践

概述参数顺序、大小写与无关参数会影响命中。本文示例统一标准化处理。正规化示例function normalize(url) {

const u = new URL(url);

u.searchParams.sort();

u.hash = '';

// 可过滤无关参数，如 utm_*

for (const k of Array.from(u.searchParams.keys())) {

if (k.startsWith('utm_')) u.searchParams.delete(k);

}

return u.origin + u.pathname + (u.search ? '?' + u.searchParams.toString() : '');

}

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

const keyUrl = normalize(event.request.url);

event.respondWith((async () => {

const cache = await caches.open('norm-v1');

const key = new Request(keyUrl, { headers: event.request.headers });

const cached = await cache.match(key);

if (cached) return cached;

const res = await fetch(event.request);

await cache.put(key, res.clone());

return res;

})());

});