教程：发现一款可以让网页永不休眠的神器（NoSleep.js）

发表于 更新于 分类于

你是否曾因为网页自动休眠而中断了重要的任务？那么今天为你介绍一款神奇的工具——NoSleep.js，它可以让你的网页保持活跃状态，永不休眠，彻底解决这个困扰。

项目地址：https://github.com/richtr/NoSleep.js

工作原理：浏览器在播放视频的时候，是不会进入睡眠状态的。因此如果H5应用能实现此功能，就可以阻止手机屏幕进入睡眠状态了，NoSleep.js它的原理就是模拟持续播放一小段MP4视频，所以能实现阻止浏览器进入睡眠状态，从而保持屏幕常亮。

我就以php为例：

1.在前引入文件，可以自己修改路径

代码如下：

1
2
3
4
5
6
7

<head>

<script src="js/NoSleep.js"></script>

</head>

2.在前面添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script>
        // Create a new NoSleep object
        var noSleep = new NoSleep();

        // Enable wake lock
        document.addEventListener('click', function enableNoSleep() {
            document.removeEventListener('click', enableNoSleep, false);
            noSleep.enable();
        }, false);

        // Disable wake lock
        // noSleep.disable();
    </script>

3.上面的代码是开启状态，禁用就将enable改为disable即可

结束语录：

这款工具实在好用，也是在做网页播放器的时候无意中发现的，真是帮了大忙。哈哈

如果你不确定网页是否开启了NoSleep.js，可查看审核元素的控制台，刷新一下网页，如果有显示Wake Lock active 就说明激活了。