客户端检测

Geolocation API

要获取浏览器当前的位置，可以使用 getCurrentPosition()方法。这个方法返回一个 Coordinates 对象，其中包含的信息不一定完全依赖宿主系统的能力:

// getCurrentPosition()会以 position 对象为参数调用传入的回调函数 
navigator.geolocation.getCurrentPosition((position) => p = position);

获取浏览器地理位置并不能保证成功。因此 getCurrentPosition()方法也接收失败回调函数作 为第二个参数，这个函数会收到一个 PositionError 对象。在失败的情况下，PositionError 对象 中会包含一个 code 属性和一个 message 属性，后者包含对错误的简短描述。code 属性是一个整数， 表示以下 3 种错误。

• PERMISSION_DENIED: 浏览器未被允许访问设备位置。页面第一次尝试访问 Geolocation API 时，浏览器会弹出确认对话框取得用户授权(每个域分别获取)。如果返回了这个错误码，则要 么是用户不同意授权，要么是在不安全的环境下访问了 Geolocation API。message 属性还会提 供额外信息。

• POSITION_UNAVAILABLE: 系统无法返回任何位置信息。这个错误码可能代表各种失败原因， 但相对来说并不常见，因为只要设备能上网，就至少可以根据 IP 地址返回一个低精度的坐标。

• TIMEOUT: 系统不能在超时时间内返回位置信息。关于如何配置超时，会在后面介绍。

// 浏览器会弹出确认对话框请用户允许访问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
  }
);

Geolocation API 位置请求可以使用 PositionOptions 对象来配置，作为第三个参数提供。这个对 象支持以下 3 个属性。

• enableHighAccuracy:布尔值，true 表示返回的值应该尽量精确，默认值为 false。默认情 况下，设备通常会选择最快、最省电的方式返回坐标。这通常意味着返回的是不够精确的坐标。 9 比如，在移动设备上，默认位置查询通常只会采用 Wi-Fi 和蜂窝网络的定位信息。而在 enableHighAccuracy 为 true 的情况下，则会使用设备的 GPS 确定设备位置，并返回这些值 的混合结果。使用 GPS 会更耗时、耗电，因此在使用 enableHighAccuracy 配置时要仔细权 衡一下。

• timeout:毫秒，表示在以 TIMEOUT 状态调用错误回调函数之前等待的最长时间。默认值是 0xFFFFFFFF(232 – 1)。0 表示完全跳过系统调用而立即以 TIMEOUT 调用错误回调函数。 11

• maximumAge:毫秒，表示返回坐标的最长有效期，默认值为 0。因为查询设备位置会消耗资源， 所以系统通常会缓存坐标并在下次返回缓存的值(遵从位置缓存失效策略)。系统会计算缓存期， 如果 Geolocation API 请求的配置要求比缓存的结果更新，则系统会重新查询并返回值。0 表示强 制系统忽略缓存的值，每次都重新查询。而 Infinity 会阻止系统重新查询，只会返回缓存的 值。JavaScript 可以通过检查 Position 对象的 timestamp 属性值是否重复来判断返回的是不 是缓存值。

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.connection 
 {
  downlink: 10,// 表示设备的当前网络带宽，单位为 MB/s。表示网络带宽为 10 MB/s
  effectiveType : "4g",//表示当前网络类型为 4G
  onchange:null,// 示当网络状态发生改变时，需要执行的回调函数。onchange 的值为 null，表示没有设置回调函数
  rtt:50, //表示设备当前的往返延迟时间（Round-Trip Time）,表示往返延迟时间为 50 毫秒
  saveData:false //表示用户是否开启了数据节省模式,saveData 的值为 false，表示用户没有开启数据节省模式
}

onchange:事件处理程序，会在任何连接状态变化时激发一个 change 事件。可以通过 navigator. connection.addEventListener('change',changeHandler)或 navigator.connection. onchange = changeHandler 等方式使用。

Battery Status API

浏览器可以访问设备电池及充电状态的信息。navigator.getBattery()方法会返回一个期约实 例，解决为一个 BatteryManager 对象

navigator.getBattery().then((b) => console.log(b));
//  BatteryManager {
//   charging:true,
//   chargingTime:Infinity,
//   dischargingTime:Infinity,
//   level:0.81,
//   onchargingchange:null,
//   onchargingtimechange:null,
//   ondischargingtimechange:null,
//   onlevelchange:null,
// }

硬件

浏览器检测硬件的能力相当有限。不过，navigator 对象还是通过一些属性提供了基本信息。

1. 处理器核心数 navigator.hardwareConcurrency 属性返回浏览器支持的逻辑处理器核心数量，包含表示核心 数的一个整数值(如果核心数无法确定，这个值就是 1)。关键在于，这个值表示浏览器可以并行执行的 最大工作线程数量，不一定是实际的 CPU 核心数。

2. 设备内存大小 navigator.deviceMemory 属性返回设备大致的系统内存大小，包含单位为 GB 的浮点数(舍入 为最接近的 2 的幂:512MB 返回 0.5，4GB 返回 4)。

3. 最大触点数 navigator.maxTouchPoints 属性返回触摸屏支持的最大关联触点数量，包含一个整数值。