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`，拒绝跨站不期望的请求。与前端的资源分组与版本命名一致，避免缓存错配。