手机屏幕不熄灭

原文链接

1、「前端」Web应用如何让手机屏幕常亮？
2、https://github.com/richtr/NoSleep.js
3、H5如何保持屏幕常亮—nosleep.js-in-vue
4、H5保持屏幕常亮方法-NoSleep插件

原理参考

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

使用

1、安装 nosleep.js

yarn add nosleep.js

2、在main.js中引入

安装 nosleep.js
npm install nosleep.jsimport NoSleep from "nosleep.js/dist/NoSleep.min.js";
 Vue.prototype.$NoSleep = NoSleep;

3、code

tips: 必须点击一下屏幕，代码才能执行，不能使用touchstart等触摸事件，必须是html元素的原生事件如click事件等
// 屏幕常亮
noSleep () {
let noSleep = new this.$NoSleep()
document.addEventListener(‘click’, function enableNoSleep () {
document.removeEventListener(‘click’, enableNoSleep, false)
noSleep.enable()
// console.log(‘click-noSleep’, noSleep)
}, false)
},
//在mounted调用
this.noSleep()

有效使用

1、引入NoSleep库

库在这里=>https://github.com/richtr/NoSleep.js/blob/master/dist/NoSleep.min.js

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

2、初始化组件

        //init noSleep<br />   var noSleep = new NoSleep();<br />   // Enable wake lock.<br />   // (must be wrapped in a user input event handler e.g. a mouse or touch handler)<br />   //  noSleep.enable()初始化方法必须绑定在鼠标事件或触摸事件内，<br />   //  当点击页面时就会激活不休眠功能<br />   document.addEventListener('click', function enableNoSleep() {<br />       document.removeEventListener('click', enableNoSleep, false);<br />       noSleep.enable();<br />       console.log('enable noSleep');<br />   }, false);

3、兼容

某些环境下不能完全兼容，可以满足正常需求啦。https://github.com/richtr/NoSleep.js/issues

————————————————
版权声明：本文为CSDN博主「Climber丶」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/GeniusCyberpunk/java/article/details/106082103

存在的问题

phone

在手机测试效果较好，手机设置30s息屏，开启不息屏后，屏幕没有熄灭；
如果手动关掉了noSleep的视频播放，禁止息屏就无效了；

pc

在pc开启会比较耗费性能，大约几分钟，就会mac响起发热，增加判断pc不开启；
如果在pc开启手机模式会进入手机模式，开启noSleep，导致mac响起发热；