几个不常用 web api 整理

2019-06-12

序

虽然上面写的是 6 月 12 日（2019 年）实际上这个文档是 2018 年 12 月就写了。

然而不知道为什么我就漏传了，只是漏传了.jpg (((泥垢了，一共就几篇还漏传了！！！)))

简介

本次将会提及的几个 api 有：

page life cycle
online state
device orientation
battery status

正文

page life cycle

网页生命周期是使用 document.visibilityState 来控制的。

用法如下：

window.addEventListener('blur', () => {});

window.addEventListener('visibilitychange', () => {
    switch(document.visibilityState) {
        case 'prerender': // 预渲染状态，此时内容不可见
        case 'hidden': // 处于后台，最小化，或者锁屏状态
        case 'visible': // 内容可见状态
        case 'unloaded': // 文档被卸载状态
    }
})

效果差不多是这样：
效果图

这个 api 有很多用途，比如当手机锁屏时，把播放的内容暂停等等，兼容性在桌面端也是足够使用了：

兼容性

网络状态监控

这个 api 很简单，就是获取当前的网络状态.

一共就两个事件：

online
offline

主要的用处也就是离线提示用户，比如放视频的时候通知用户已经离线。

online/offine 浏览器支持度

浏览器支持度

震♂动

就是让手机震动啦！

navigator.vibrate(100);
navigator.vibrate([300, 200, 100, 400, 100])
navigator.vibrate(0)

这里 caniuse 那边看不到这个 api 的相关信息，但是 mdn 倒是有:

mdn

如果有这个功能的浏览器将会触发震动，没有的当然就不触发咯。

移动端的api，我们就看看移动端的兼容性就可以了，很遗憾的是，safari是完全没打算支持，至于 IE mobile 我们所索性忽略就可以了，安卓的 4.3版本和 4.4.4 版本以下都是 bug 奇多的版本不支持也是理所当然的咯，总体兼容性还可以，可以用作一个补强手段，比如检验密码的时候。

兼容性

然而在测试的时候，目前没有任何一个浏览器可以正常使用！

陀螺仪

陀螺仪是一个非常有意的 api，这个 api 的使用频次相较之上文 api 可以实际使用的情况要远远好于其他。

陀螺仪的使用场景通常也就是 webvr，比方讲：

vr 红包这样
还有就是像农药那样有个景深视差移动

至于浏览器兼容性么，基础功能的支持都是没啥问题的：

浏览器兼容性

利用和这个api可以获得如下三个数值

alpha
beta
gamma

alpha

这指代设备沿着 z 轴旋转角度

alpha

beta

这指代设备沿着 x 轴的旋转角度

beta

gamma

这指代设备沿着 y 轴的旋转角度

gamma

上述三个api可以结合使用以获得当前设备在各个轴上的实际情况

<div class="wrap">
	<div class="cube">
		<div class="front">前</div>
		<div class="back">后</div>
		<div class="top">上</div>
		<div class="bottom">下</div>
		<div class="left">左</div>
		<div class="right">右</div>
	</div>
</div>