Service Worker 通过 navigator.connection API 获取网络状况，在 fetch 事件中策略性选择预生成的多分辨率静态资源并重写请求 URL，结合 Cache API 实现透明、高效的质量自适应。Service Worker 本身不直接“监测”网络类型，但它能结合 `navigator.connection` API 获取实时网络信息，并在 `fetch` 事件中动态决定加载哪个质量版本的静态资源——前提是这些资源已预先生成并按规则命名（如 `/images/photo-360w.jpg`、`/images/photo-1200w.jpg`）。 关键不在运行时压缩，而在**策略性选择与代理分发**。整个过程对页面透明，HTML 中仍写标准路径，所有适配逻辑由 Service Worker 统一接管。
依赖 navigator.connection 获取真实网络状况
现代浏览器（chrome、edge、firefox 部分版本）支持 navigator.connection，可读取：
-
effectiveType：如
slow-2g、2g、3g、4g -
downlink：有效带宽（Mbps），例如
0.5、2.8、10 - rtt：预估往返延迟（ms）
注意：该 API 只在安全上下文（HTTPS 或 localhost）可用；部分 Android WebView 和旧版 Safari 不支持，需降级处理（如默认加载中等质量资源）。
静态资源需提前生成多分辨率版本
Service Worker 不生成新文件，只做路由切换。因此构建阶段就要输出不同尺寸的资源，路径需有规律，便于匹配：
- CSS/JS 一般无需多版本（体积小、压缩充分），重点在图片、字体、视频封面等
- 推荐命名方式：
/assets/logo-2x.png→/assets/logo-1x.png；或按宽度：/img/banner-768w.webp、/img/banner-1200w.webp - WebP/AVIF 等现代格式可配合尺寸降级，进一步节省流量
fetch 中重写请求 URL 实现质量切换
在 Service Worker 的 fetch 监听器中，识别图片等静态资源请求，根据网络条件改写 event.request.url：
- 若
navigator.connection.downlink < 1.5，将/img/photo.jpg替换为/img/photo-480w.jpg - 若
navigator.connection.effectiveType === 'slow-2g'，可强制跳转到占位图或极简 SVG - 使用
caches.match()优先查缓存，命中则直接返回；未命中再 fetch 新 URL 并缓存
示例逻辑片段（简化）：
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
if (url.pathname.match(/\.(jpg|jpeg|png|webp|avif)$/i)) {
const { effectiveType, downlink } = navigator.connection || {};
let targetUrl = url.href;
if (effectiveType === 'slow-2g' || downlink < 0.8) {
targetUrl = url.href.replace(/(\.[\w]+)/, '-320w$1');
} else if (downlink < 2.5) {
targetUrl = url.href.replace(/(\.[\w]+)/, '-768w$1');
}
event.respondWith(
fetch(targetUrl)
.catch(() => caches.match(url.href)) // 备用原图缓存
);
}
});
配合缓存策略提升响应速度与一致性
单纯切换 URL 不够，还需合理利用 Cache API 避免重复下载：
- 对高清资源设
Cache-Control: public, max-age=31536000，长期复用 - 对低清备用资源设
private, max-age=604800，避免 CDN 混淆 - 在
install阶段预缓存核心低清资源（如 logo、icon），保障弱网首屏可用 - 启用 Stale-while-revalidate 策略：先返回缓存图，后台静默更新高清版
这样既保证加载不卡顿，又为后续访问沉淀更优资源。
