「前端」Web应用如何让手机屏幕常亮？

近来随着前端技术的发展，HTML5应用又看见了春天。很多以前深耕于PC端的WEB开发者，慢慢也开始转战移动端。虽然在PC端他们已身经百战，但是在移动端碰到的问题仍不少，因为WEB网络永远不会提供像本地移动平台一样多的API或控制。经管如此，但我们的用户仍然期望有相同的优秀体验。

在WEB端创建HTML5游戏和大型媒体应用程序是非常困难的，因为您不能忽视平台本身的限制。其中一个值得注意的小功能就是防止用户未激活时设备进入休眠状态。 想象一下，如果你的用户玩一款不需要太多互动的游戏，体验一个VR演示，甚至只是一个博客文章或幻灯片，屏幕突然变黑，这体验该多糟糕。

NoSleep.js一个wakelock小工具，它可以防止浏览器和设备进入睡眠状态！它在Android端和IOS端都适用。

下载

使用Bower命令，可以执行如下命令：

bower install nosleep

使用npm，可以执行如下命令：

npm install nosleep.js

或者，您可以手动添加NoSleep.js到您的项目

使用

使用NoSleep.js非常简单，只需要在需要控制的地方添加如下代码：

一旦你想放弃睡眠控制，只需调用禁用方法即可，如下：

原理

知道怎么使用NoSleep.js来阻止手机屏幕进入睡眠状态了，那你知道它的原理是什么吗？下面我来给你一一道来。

我们知道手机浏览器在播放视频的时候，手机是不会进入睡眠状态的。因此如果你的WEB应用能实现此效果，那你就可以阻止手机屏幕进入睡眠状态了。NoSleep.js之所以可以阻止手机屏幕进入睡眠状态，就是因为它模拟持续播放一小段MP4视频。