场景: 比如打开一个浏览器页面(比如大屏),想让它一直显示着,而不是过几分钟不操作就屏幕黑了.(电脑有设置电脑不操作就会多长时间就会息屏睡眠,如果要求每个客户都去操作一下电脑设置一下从不睡眠,这很不友好和现实.而且我也只想客户在大屏的时候才这样,其他页面就正常,按电脑设定走)
实现方法:
要想屏幕保持唤起一直不息屏状态，很简单，一行代码的事情：
navigator.wakeLock.request('screen');
是不是很简单,但是这里面还有一些注意点,
- 由于保持屏幕唤醒是一个占用资源开销的操作，所以，浏览器有个行为，那就是如果当前页面最小化，或者非当前显示标签页，屏幕的Wake锁定行为会被释放，用户再切换过来的时候，就没有锁定了，因此，还需要其他代码的处理。
document.addEventListener('visibilitychange', () => {if (document.visibilityState === 'visible') {navigator.wakeLock.request("screen")}
});
- 在实操过程中，很容易重复执行唤醒锁定，因此，还需要知道什么时候释放了屏幕唤醒操作，以及如何主动释放禁止熄屏的功能。
wakeLock.release().then(() => {wakeLock = null;
});
来一波vue前端代码操作试验 :
html<el-radio-group v-model="radioVlaue" @input="changeStatue()"><el-radio :label="1">不息屏</el-radio><el-radio :label="2">息屏</el-radio></el-radio-group>
export default {data() {return {wakeLock: null,};},mounted() {this.setWakeLock();},methods: {changeStatue() {if(navigator.wakeLock) {if(this.radioVlaue == 1) {this.setWakeLock();}else {this.wakeLock.release().then(() => {this.wakeLock = null;});}}},setWakeLock() {if(this.wakeLock) {return;}navigator.wakeLock.request('screen').then(result => {this.wakeLock = result;console.log('唤醒锁定已激活');this.wakeLock.addEventListener('release', () => {this.wakeLock = null;console.log('唤醒锁定已释放');});}).catch((err) => {console.error(`<span class="red">唤醒锁定失败：${err.message}</span>`);});if(navigator.wakeLock) {// 选项卡切换到当前页面，如果已经释放了熄屏，再次锁定document.addEventListener('visibilitychange', () => {if(this.wakeLock === null && document.visibilityState === 'visible' && this.radioVlaue == 1) {this.setWakeLock();}});}else {console.error('当前浏览器不支持Screen Wake Lock API！');}},},
如果想看看效果,可以试试,最好把电脑息屏改成1分钟,要不然等太久了, 累啊…(除非等待时间玩把手游😁)
对了,还有一个要注意:
屏幕唤起锁定不是没有代价的，如果屏幕一直保持明亮，会阻止屏幕保护程序的启动，会影响显示器的寿命。
对于移动设备，屏幕往往是最耗电的，因此，阻止熄屏会带来更高的电量开销，因此，非必要场景是不推荐启用熄屏锁定的。
这是看了前端css大佬张鑫旭写的一波文章,观后有感😄,如果大家不认识,百度一波
拿走,不用谢!!!送人玫瑰,手留余香
