likes
comments
collection
share

navigator 拓宽前端视野（二）

作者站长头像
站长
· 阅读数 14

前言💐

书接上回，上一篇更文我介绍了bom对象navigator的一些属性 API 传送门，那么本文就继续来介绍一下它的一些“神奇”的方法 API。 还是那句话:

人总是对自己不了解的东西心生恐惧😱

对于大部分前端仔来说，其实只要知道有这么个东西即可。大部分刁钻的需求，其实最难的是我们想不到实现方式，而不会不会用那都是后话了（不会可以百度cv 🐶）

1. sendBeacon() ｜ 埋点数据上报

navigator.getBattery() 可用于通过发起网络请求将少量数据异步传输到 Web 服务器。通常用于埋点数据上报，解决了埋点传统数据上报方式的一些问题（在页面关闭时无法确保请求完成等）。 因为使用 sendBeacon()  方法会使用户代理在有机会时异步地向服务器发送数据（数据传输保证能完成），同时不会影响页面关闭或者下一个页面的加载。

navigator 拓宽前端视野（二） navigator 拓宽前端视野（二）

示例代码 >>>

document.addEventListener('visibilitychange', function logData() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData);
  }
});

参数 >>>

  • url ：接口地址；
  • data ：要发送的数据，可以是ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData、URLSearchParams类型的数据。

2. getBattery() ｜ 电池信息监控

navigator.getBattery() 方法用来获取有关系统电池的信息。返回一个promise对象，然后 resolve 后得到BatteryManager对象，它提供了一些关于电池的信息、以及一些监控电池状态的方法。

navigator 拓宽前端视野（二） navigator 拓宽前端视野（二）

示例代码 >>>

navigator.getBattery().then((battery) => {
  console.log('电池信息',battery)
  console.log('电池是否正在充电',battery.charging)
  battery.addEventListener("chargingchange", () => {
    console.log(battery.charging?'开始充电':'停止充电')
  });
});

属性 >>>

  • charging ：电池是否正在充电；
  • chargingTime ：电池充满电之前的剩余时间（秒），如果电池已经充满电，则为0；
  • dischargingTime ：电池距离完全放电和系统关闭之前的剩余时间（秒）；
  • level ：电池电量（数值为0～1），电量百分比。

方法 >>>

  • chargingchange ：更改电池充电状态时触发；
  • chargingtimechange ：更改电池充电时间（chargingTime属性）时触发；
  • dischargingtimechange ：更改电池放电时间（dischargingTime属性）时触发；
  • levelchange ：更改电池电量（电量属性）时触发。

3. registerProtocolHandler() ｜ 拨打电话等

navigator.registerProtocolHandler() 方法用于为网站注册指定的协议程序打开特定的 URL（又名协议），例如邮件协议mailto:URL,电话协议tel:URL，如果已经注册过了，就不会再显示询问弹窗。 unregisterProtocolHandler() 方法则是用来撤销协议处理程序的，参数有scheme，url

navigator 拓宽前端视野（二） navigator 拓宽前端视野（二）

示例代码 >>>

const scheme = 'tel'
const url = `${当前网站网址}?uri=%s`    //例如：
const title = '允许这个站点处理 [scheme] 链接吗？'
navigator.registerProtocolHandler(scheme,url,title);

参数 >>>

  • scheme ：希望当前站点处理的协议名，可处理的协议有bitcoin、mms、geo、news、mailto、ssh，tel等；
  • url ：注册协议的网站地址，格式为当前网站网址+'?uri=%s' ，注意这个字符串必须包含一个"%s"的占位符，用来被将要受理的文档的escaped 链接所替换（可能是一个真实的 URL，或者是一个电话号码，邮件地址之类的）；
  • title ：询问用户注册协议时，弹窗的标题。

4. requestMIDIAccess() ｜ 电子乐器通信

navigator.requestMIDIAccess() 方法用来电子乐器，计算机和其他设备间的相互通信。 通过它可以从一台设备向另一台设备发送消息。

navigator 拓宽前端视野（二）

示例代码 >>>

if (navigator.requestMIDIAccess) {
    navigator.requestMIDIAccess().then(success, failure);
}
//成功回调
function success (access) {
  //获取可用MIDI控制器的列表
  console.log(access)
  //输入代表您已连接到计算机的任何MIDI设备
  const inputs = access.inputs.values();
  const outputs = access.outputs.values();
}
//失败回调
function failure () {
    console.error('无法访问您的midi设备')
}

参数 >>>

  • sysex ：boolean类型，默认值为false。设置为true即允许发送和接收系统独占系统操作系统消息；
  • software ：boolean类型，默认值为false。设置为true即允许系统使用任何已安装的软件合成器。

5. share() ｜ 分享数据

navigator.share() 调用设备的本地共享机制来共享文本、URL或文件等数据。可用的共享目标取决于设备，可能包括剪贴板、联系人和电子邮件应用程序、网站、蓝牙等。

navigator 拓宽前端视野（二）

示例代码 >>>

const shareData = {
  title: "分享",
  text: "学如逆水行舟，不进则退",
  url: "https://developer.mozilla.org",
};
navigator.share(shareData)

6. vibrate() ｜ 设备振动

navigator.vibrate() 方法可以使设备振动（在设备上存在振动硬件时）。如果调用此方法时振动模式已经在进行中，则会重新开始振动。

navigator 拓宽前端视野（二）

示例代码 >>>

navigator.vibrate(200); // 振动200ms
navigator.vibrate([
  100, 30, 100, 30, 100, 30, 200, 30, 200, 30, 200, 30, 100, 30, 100, 30, 100,
]); // 用摩斯密码振动“SOS”

参数 >>>

  • pattern ：振动或暂停的时长。为数组时，每个值代表指示交替振动或暂停的毫秒数。

7. getGamepads() ｜ 游戏手柄

navigator.getGamepads() 方法用于获取设备连接的游戏手柄，返回一个数组。

navigator 拓宽前端视野（二）

示例代码 >>>

window.addEventListener("gamepadconnected", (e) => {
  const gp = navigator.getGamepads()[e.gamepad.index];
  console.log(
    `在索引${gp.index}: ${gp.id} 处连接的游戏手柄，带有${gp.buttons.length}个按钮, ${gp.axes.length}个轴`
  );
});

10. 结语 🍺🍺🍺

虽然 navigator 的很多 API 还在实验阶段，兼容性不是很好，但是我觉得这些 API 的兼容性是和产品经理的脑回路对于市场的兼容性是成正比的 🐶，产品能提出这些刁钻的需求，就应该想到并接受它的兼容性问题。 有些同学可能会问了：产品根本不会想这些。 那你就跟他说：*****