Fetch Metadata 请求头与前端路由策略实践

概述前端可根据 `request.destination/mode` 对资源采用差异化策略；服务端则使用 Fetch Metadata 请求头进行防护。本文聚焦前端可实施部分并提出协作建议。前端路由与缓存策略self.addEventListener('fetch', event => {

const dest = event.request.destination;

if (dest === 'image' || dest === 'font') {

event.respondWith(cacheFirst(event));

} else if (dest === 'script' || dest === 'style') {

event.respondWith(staleWhileRevalidate(event));

} else if (event.request.mode === 'navigate') {

event.respondWith(networkFirst(event));

}

});

服务端协作建议验证 `Sec-Fetch-Site/Mode/Dest`，拒绝跨站不期望的请求。与前端的资源分组与版本命名一致，避免缓存错配。