0
点赞
收藏
分享

微信扫一扫

js 浏览器元数据

navigator 对象暴露出一些 API,可以提供浏览器和操作系统的状态信息。 Geolocation API navigator.geolocation 属性暴露了 Geolocation API,可以让浏览器脚本感知当前设备的地理位置。这个 API 只在安全执行环境(通过 HTTPS 获取的脚本)中可用。这个 API 可以查询宿主系统并尽可能精确地返回设备的位置信息。根据宿主系统的硬件和配置,返回结果的精度可能不一样。手机 GPS 的坐标系统可能具有极高的精度,而 IP 地址的精度就要差很多。根据 Geolocation API 规范: 地理位置信息的主要来源是 GPS 和 IP 地址、射频识别(RFID)、Wi-Fi 及蓝牙 Mac 地址、GSM/CDMA 蜂窝 ID 以及用户输入等信息。 要获取浏览器当前的位置,可以使用 getCurrentPosition()方法。这个方法返回一个Coordinates 对象,其中包含的信息不一定完全依赖宿主系统的能力:

navigator.geolocation.getCurrentPosition((position) => p = position);

这个 position 对象中有一个表示查询时间的时间戳,以及包含坐标信息的 Coordinates 对象:

console.log(p.coords); // Coordinates {...}

Coordinates 对象中包含标准格式的经度和纬度,以及以米为单位的精度。精度同样以确定设备位置的机制来判定。

console.log(p.coords.accuracy); // 

Coordinates 对象包含一个 altitude(海拔高度)属性,是相对于 1984 世界大地坐标系(World Geodetic System,1984)地球表面的以米为单位的距离。此外也有一个 altitudeAccuracy 属性,这个精度值单位也是米。为了取得 Coordinates 中包含的这些信息,当前设备必须具备相应的能力(比如 GPS 或高度计)。很多设备因为没有能力测量高度,所以这两个值经常有一个或两个是空的。 ``console.log(p.coords.altitude); // -8.800000190734863 console.log(p.coords.altitudeAccuracy); // 200

Coordinates 对象包含一个 speed 属性,表示设备每秒移动的速度。还有一个 heading(朝向)属性,表示相对于正北方向移动的角度(0 ≤ heading < 360)。为获取这些信息,当前设备必须具备相应的能力(比如加速计或指南针)。很多设备因为没有能力测量高度,所以这两个值经常有一个是空的,或者两个都是空的。
获取浏览器地理位置并不能保证成功。因此 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。默认情况下,设备通常会选择最快、最省电的方式返回坐标。这通常意味着返回的是不够精确的坐标。 比如,在移动设备上,默认位置查询通常只会采用 Wi-Fi 和蜂窝网络的定位信息。而在enableHighAccuracy 为 true 的情况下,则会使用设备的 GPS 确定设备位置,并返回这些值的混合结果。使用 GPS 会更耗时、耗电,因此在使用 enableHighAccuracy 配置时要仔细权衡一下。  timeout:毫秒,表示在以 TIMEOUT 状态调用错误回调函数之前等待的最长时间。默认值是0xFFFFFFFF(232 – 1)。0 表示完全跳过系统调用而立即以 TIMEOUT 调用错误回调函数。  maximumAge:毫秒,表示返回坐标的最长有效期,默认值为 0。因为查询设备位置会消耗资源,所以系统通常会缓存坐标并在下次返回缓存的值(遵从位置缓存失效策略)。系统会计算缓存期,如果 Geolocation API 请求的配置要求比缓存的结果更新,则系统会重新查询并返回值。0 表示强制系统忽略缓存的值,每次都重新查询。而 Infinity 会阻止系统重新查询,只会返回缓存的 值。JavaScript 可以通过检查 Position 对象的 timestamp 属性值是否重复来判断返回的是不是缓存值。 Connection State 和 NetworkInformation API 浏览器会跟踪网络连接状态并以两种方式暴露这些信息:连接事件和 navigator.onLine 属性。 在设备连接到网络时,浏览器会记录这个事实并在 window 对象上触发 online 事件。相应地,当设备断开网络连接后,浏览器会在 window 对象上触发 offline 事件。任何时候,都可以通过 navigator. onLine 属性来确定浏览器的联网状态。这个属性返回一个布尔值,表示浏览器是否联网。

window.addEventListener('online', connectionStateChange); 
window.addEventListener('offline', connectionStateChange); 
// 设备联网时:
// true 
// 设备断网时:
// false

当然,到底怎么才算联网取决于浏览器与系统实现。有些浏览器可能会认为只要连接到局域网就算“在线”,而不管是否真正接入了互联网。 navigator 对象还暴露了 NetworkInformation API,可以通过 navigator.connection 属性使用。 这个 API 提供了一些只读属性,并为连接属性变化事件处理程序定义了一个事件对象。 以下是 NetworkInformation API 暴露的属性。  downlink:整数,表示当前设备的带宽(以 Mbit/s 为单位),舍入到最接近的 25kbit/s。这个值可能会根据历史网络吞吐量计算,也可能根据连接技术的能力来计算。  downlinkMax:整数,表示当前设备最大的下行带宽(以 Mbit/s 为单位),根据网络的第一跳来确定。因为第一跳不一定反映端到端的网络速度,所以这个值只能用作粗略的上限值。  effectiveType:字符串枚举值,表示连接速度和质量。这些值对应不同的蜂窝数据网络连接 技术,但也用于分类无线网络。这个值有以下 4 种可能。  slow-2g  往返时间 > 2000ms  下行带宽 < 50kbit/s  2g  2000ms > 往返时间 ≥ 1400ms  70kbit/s > 下行带宽 ≥ 50kbit/s  3g  1400ms > 往返时间 ≥ 270ms  700kbit/s > 下行带宽 ≥ 70kbit/s  4g  270ms > 往返时间 ≥ 0ms  下行带宽 ≥ 700kbit/s  rtt:毫秒,表示当前网络实际的往返时间,舍入为最接近的 25 毫秒。这个值可能根据历史网络吞吐量计算,也可能根据连接技术的能力来计算。  type:字符串枚举值,表示网络连接技术。这个值可能为下列值之一。  bluetooth:蓝牙。  cellular:蜂窝。  ethernet:以太网。  none:无网络连接。相当于 navigator.onLine === false。  mixed:多种网络混合。  other:其他。  unknown:不确定。  wifi:Wi-Fi。  wimax:WiMAX。  saveData:布尔值,表示用户设备是否启用了“节流”(reduced data)模式。  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 { ... } BatteryManager 包含 4 个只读属性,提供了设备电池的相关信息。  charging:布尔值,表示设备当前是否正接入电源充电。如果设备没有电池,则返回 true。  chargingTime:整数,表示预计离电池充满还有多少秒。如果电池已充满或设备没有电池,则返回 0。  dischargingTime:整数,表示预计离电量耗尽还有多少秒。如果设备没有电池,则返回 Infinity。  level:浮点数,表示电量百分比。电量完全耗尽返回 0.0,电池充满返回 1.0。如果设备没有电池,则返回 1.0。 这个 API 还提供了 4 个事件属性,可用于设置在相应的电池事件发生时调用的回调函数。可以通过给 BatteryManager 添加事件监听器,也可以通过给事件属性赋值来使用这些属性。

 onchargingtimechange
 ondischargingtimechange
 onlevelchange
navigator.getBattery().then((battery) => { 
 // 添加充电状态变化时的处理程序
 const chargingChangeHandler = () => console.log('chargingchange'); 
 battery.onchargingchange = chargingChangeHandler; 
 // 或
 battery.addEventListener('chargingchange', chargingChangeHandler); 
 // 添加充电时间变化时的处理程序
 const chargingTimeChangeHandler = () => console.log('chargingtimechange'); 
 battery.onchargingtimechange = chargingTimeChangeHandler; 
 // 或
 battery.addEventListener('chargingtimechange', chargingTimeChangeHandler); 
 // 添加放电时间变化时的处理程序
 const dischargingTimeChangeHandler = () => console.log('dischargingtimechange'); 
 battery.ondischargingtimechange = dischargingTimeChangeHandler; 
 // 或
 battery.addEventListener('dischargingtimechange', dischargingTimeChangeHandler);
 // 添加电量百分比变化时的处理程序
 const levelChangeHandler = () => console.log('levelchange'); 
 battery.onlevelchange = levelChangeHandler; 
 // 或
 battery.addEventListener('levelchange', levelChangeHandler); 
});

举报

相关推荐

0 条评论