通过 Service Worker 监测用户网络类型动态决定静态资源质量-js教程-PHP中文网

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 ，将 <code>/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  caches.match(url.href)) // 备用原图缓存
    );
  }
});