学习笔记 2020-11-05

JavaScript 高级程序设计(第4版) 阅读记录

客户端检测

软件与硬件检测

浏览器元数据

1. Geolocation API

   navigator.geolocation 属性可以让浏览器脚本感知当前设备的地理位置。这个 API 只在安全执行环境中可用。

   这个 API 可以查询素数系统并尽可能精确地返回设备的位置信息。根据宿舍系统的硬件和配置，返回结果的精度可能不一样。手机 GPS 的坐标系统可能具有极高的精度，而 IP 地址的精度就要差很多。

   要获取浏览器当前的位置，可以使用 getCurrentPosition() 方法。这个方法返回一个 Coordinates 对象。

   navigator.geolocation.getCurrentPosition(position => (p = position));
   console.log(p.timestamp); // 1525364883361
   console.log(p.coords); // Coordinates {...}
   console.log(p.coords.latitude, p.coords.longitude); // 37.4854409, -122.2325506 经纬度
   console.log(p.coords.accuracy); // 58 精度
   console.log(p.coords.altitude); // -8.800000190734863 海拔高度
   console.log(p.coords.altitudeAccuracy); // 200
   // 浏览器会弹出确认对话框请用户允许访问 Geolocation API
   // 这个例子显示了用户拒绝之后的结果
   navigator.geolocation.getCurrentPosition(
     () => {},
     e => {
       console.log(e.code); // 1
       console.log(e.message); // User denied Geolocation
     }
   );
   // 这个例子展示了在不安全的上下文中执行代码的结果
   navigator.geolocation.getCurrentPosition(
     () => {},
     e => {
       console.log(e.code); // 1
       console.log(e.message); // Only secure origins are allowed
     }
   );

   还可以传入第三个参数，一个 PositionOptions 对象。这个对象支持 3 个属性：

   • enableHighAccuracy: 布尔值，表示是否返回精确的值。
   • timeout: 毫秒，表示在以 TIMEOUT 状态调用错误回调之前等待的最长时间。
   • maxmumAge: 毫秒，表示返回坐标的最长有效期。

2. Connection State 和 NetworkInformation API

   浏览器会跟踪网络连接状态并以两种方式暴露这些信息：

   • 连接事件
   • navigator.onLine 属性。

   在设备连接到网络时，浏览器会记录这个事实并在 window 对象上触发 onLine 事件。相应地，当设备断开网络连接后，浏览器会在 window 对象上触发 offline 事件。任何时候都可以通过 navigator.onLine 属性来确定浏览器的联网状态。这个属性返回布尔值。

   const connectionStateChange = () => console.log(navigator.onLine);
   window.addEventListener('online', connectionStateChange);
   window.addEventListener('offline', connectionStateChange);
   // 设备联网时：
   // true
   // 设备断网时：
   // false

   联网的判定取决于浏览器和系统实现。

   navigator 对象还暴露了 NetworkInformation API ，可以通过 navigator.connection 属性使用。这个 API　提供了一些只读属性，并未连接属性变化事件处理程序定义了一个事件对象。

   • downlink：整数，表示当前设备的带宽，以 Mbit/s 为单位。
   • downlinkMax：整数，表示当前设备最大的下行带宽，根据网络的第一跳来确定。
   • effectiveType：字符串枚举值，表示连接速度和质量。这个值有以下 4 种可能：
     • slow-2g
     • 2g
     • 3g
     • 4g
   • rtt：毫秒，表示当前网络实际的往返时间。
   • type：字符串枚举值，表示网络连接技术，可能为下列值：
     • bluetooth
     • cellular
     • ethernet
     • none
     • mixed
     • other
     • unknown
     • wifi
     • wimax
   • saveData：布尔值，表示用户设备是否启用了节流模式。
   • onchange：事件处理程序，会在任何连接状态变化时激发一个 change 事件。