如何通过 navigator.connection.saveData 为终端访客自动节省手机流量

许多开发者都听说过 navigator.connection.saveData 这个 API，以为它能自动帮用户省流量。但这里有一个关键误区需要先澄清：它只是一个信号，而不是开关。 这个只读属性仅仅告诉你用户是否开启了系统的“省流量模式”，而真正节省流量，还需要你根据这个信号，主动去调整和降级页面资源。

为什么 navigator.connection.saveData 无法自动节省用户流量

简单来说，这个 API 的设计初衷是“告知”，而非“执行”。它本身不会拦截任何网络请求，也不会压缩任何图片。它的唯一作用，就是告诉你用户的设备是否处于 Chrome 的 Data Saver、Android 的 Data Saver 或 iOS 的 Low Data Mode 这类模式下。

所以，一个常见的尴尬场景是：页面检测到 saveData 为 true，但依然在肆无忌惮地加载高清大图、Web 字体和一堆第三方分析脚本，用户的流量就在这种“虚假承诺”中悄悄流失了。

理解它的局限性很重要：

• 它是 Flag，不是开关：你需要根据它的值（true/false）来编写分支逻辑，实现资源加载策略的切换。
• 兼容性是个现实问题：Safari 直到 iOS 16.4 / macOS 13.3 才支持，旧版本会返回 undefined。此外，一些安卓定制系统或国产浏览器可能根本不暴露这个值，或者始终返回 false。

如何安全检测并响应 saveData 状态以节省流量

直接读取 navigator.connection.saveData 就开干是鲁莽的。正确的做法是先确保环境支持，再结合业务场景做决策。

• 必须做防御性判断：navigator.connection 对象在某些 WebView 中可能不存在，saveData 属性也可能是 undefined。一个健壮的写法是：const shouldSaveData = navigator.connection.saveData === true;
• 定位要清晰：不要依赖它来决定核心功能（比如是否允许登录），它更适合用于非关键体验的优化。例如，用它来决定是否加载一张低质量图片，或者在 API 请求中附加一个 prefer=light 参数来请求精简数据。
• 可以组合判断：有时可以结合 navigator.onLine 属性。比如，当用户既处于离线状态又开启了省流模式时，可以更激进地使用本地缓存作为回退方案。

哪些资源最适合根据 saveData 动态切换以节省流量

优化的目标不是粗暴地砍掉功能，而是为高流量消耗的资源寻找更轻量的替代方案。优先级应该给到那些体积大、非首屏必需、且有替代品的资源。

• 图片：最高优先级的优化对象。可以利用 元素配合 CSS 媒体查询 (prefers-reduced-data: reduce)（注意兼容性），或者在 JavaScript 中根据 shouldSaveData 动态将图片 src 从 WebP 切换到 JPEG，甚至替换为一个 SVG 占位符。
• 字体：可以考虑跳过 @font-face 加载的定制字体，直接回退到系统字体栈。或者，只加载常规字重，跳过粗体、斜体等额外字重文件。
• 视频/音频：默认禁止自动播放，使用 poster 属性提供静态封面。当省流模式开启时，可以隐藏播放控件，或者用一张 GIF 预览图代替视频本身。
• 第三方脚本：像 Google Analytics、神策这类分析工具，或者广告 SDK，可以延迟加载。在 shouldSaveData 为真时，甚至可以跳过它们的加载逻辑。

容易被忽略的细节与性能陷阱：优化省流模式

这个 API 用起来简单，但细节决定成败。忽略以下几点可能导致优化失效甚至引发问题：

• 状态是动态的：navigator.connection 是一个动态对象，它的属性（包括 saveData）可能随着用户更改系统设置而实时变化。但浏览器通常不会主动通知你这一变化（Chromium 支持 navigator.connection.addEventListener(“change”, …) 事件，但其他浏览器未必）。这意味着你的降级策略需要考虑状态变化后的更新。
• 别忘了服务端：当用户开启省流模式时，Chrome/Edge Android 浏览器会在发出的 HTTP 请求头中携带 Save-Data: on。后端服务完全可以利用这个头信息，直接返回结构更精简的 JSON 数据，或者跳过一些非必要的埋点字段，这比在前端拦截更早、更彻底。
• SSR 中的坑：切忌在服务端渲染 (SSR) 过程中读取 navigator.connection，因为 Node.js 环境下根本没有这个对象，会导致错误。相关的判断逻辑必须放在客户端 hydration（注水）完成之后。
• 优化逻辑本身也要“轻”：开启省流模式的用户，其网络环境往往也较弱，JavaScript 执行效率可能更低。因此，你为省流编写的降级逻辑本身就应该足够轻量，避免引入复杂的计算或庞大的 polyfill。CSS 层面的降级，优先使用原生的媒体查询。

说到底，真正有效的流量节省，从来不是靠一个布尔值魔法般实现的。它依赖于开发者在每张图片加载前、每个脚本插入前、每次 API 调用前，都多思考一步：“用户此刻真的需要这个资源吗？” 而 navigator.connection.saveData，正是帮你听到用户这个无声诉求的一个关键信号。