JavaScript Vibration震动API

Vibration API用于控制移动端设备的震动器,它可以设置一个震动序列以完成不同时间间隔的震动频率。

一、应用场景

震动API主要应用于移动端游戏等交互类页面,例如设计类游戏可以在击中目标后调用震动器来增强用户体验。
它还可以用来做报错类的提醒,例如用户对一个表单的必填项没有进行填写,在校验失败后,可以调用震动API来提示用户进行填写。
具体使用场景需要考虑清楚,以免滥用反而影响用户体验。

二、兼容性

目前在caniuse上看到的兼容性情况是有问题的,有些浏览器虽然兼容,但基本上除了移动设备外,其他的上网设备都没有震动器,所以桌面版的浏览器虽然支持此API,但并不能使用(使用没有效果但不报错),故只应该应用于移动项目中。
目前在以下APP(Android系统)的最新版本中测试均有效:
360极速浏览器
UC浏览器
手机QQ内置浏览器(未测试QQ浏览器,但应该会支持)
微信
微博
三星手机默认浏览器(Android 5.1.1版本)

三、用法

navigator.vibrate可以控制震动器震动
它接收一个参数,表示震动序列,例如:
navigator.vibrate(1000)表示震动1000毫秒
navigator.vibrate(1000, 500, 1000)表示震动1000毫秒后,暂停500毫秒,然后再震动1000毫秒
当在一个震动的过程中,希望取消震动,则可以调用此方法,第一个参数为null或[]、[0]等:
navigator.vibrate(0)
navigator.vibrate(null)
navigator.vibrate([])
navigator.vibrate([0])
navigator.vibrate([0, 0, 0, ……])//全都是0,没什么意义

四、演示
请使用手机打开,支持微信,建议WIFI环境下打开,需要消耗600k左右的流量。
https://www.lyz810.com/demo/vibration/

JavaScript在线状态检测API

在线状态检测API用于检测当前的网络是否正常,包括是否在线以及在线状态改变事件。

一、当前在线状态属性

navigator.onLine用于检测当前的网络状态,为布尔型,用户网络连通则值为ture,否则值为false

二、状态改变事件

为window绑定online及offline事件可以监听网络连通性的改变:

window.addEventListener('online', function(){alert('网络已连接')},false);
window.addEventListener('offline', function(){alert('网络已断开')},false);

注意:IE8中需要给document.body绑定事件而不是window
此处网络连通性的变化指的是物理上的连通性变化,如果是在控制台将网络限制为offline则不会触发相应的事件。

三、兼容性

IE:8+
Chrome:14+
Firefox:3.5+(4-40存在bug,只有在offline模式下才会显示正确,否则onLine的值一直是true)
Safari:5+