「前端」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视频。