「前端」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視頻。