今天才知道,Web网页也能阻止息屏了

这篇文章发布于 2024年03月17日,星期日,23:35,归类于 JS API。 阅读 3709 次, 今日 11 次 6 条评论

 

wake up

一、阻止屏幕黑屏休眠

之前做PPT录制的时候,一个电脑显示台词,一个电脑录制,然后显示台词的那个电脑没几分钟就黑屏,烦不胜烦,没办法,就打开一个视频,窗口小小的,也就是画中画模式,

今天才发现,原来不久前,Chrome和Safari浏览器都支持了名为Screen Wake Lock的API,可以设置Web网页打开的状态下,显示器屏幕不会自动休眠。

根据我查找的资料显示,美国知名烹饪网站 Betty Crocker 实现 Screen Wake Lock API 后, 发现其用户的购买意愿指标增加了 300%。如需了解详情,请参阅 🍰? Betty Crocker 案例研究

这还真是意外,居然还可以增加产品的直接收益。

不过应该只对特定网站有用,像是做饭的网站,用户做菜的时候,肯定是希望网页一直亮着的,因为要时不时看,所以,收益才这么明显。

如果是传统的社交网站应该作用就一般了,不知道小说阅读类网站的收益如何……

这个之后再议,当下我就有一个需求场景,某项目介绍页面,进入演讲模式的时候,一定是不能息屏的。

就可以使用这里的Screen Wake Lock API了。

二、屏幕唤起锁定API的语法与使用

这种语法简单的API的最快捷的学习方式就是案例。

您可以狠狠地点击这里:显示器屏幕唤起锁定JS实现demo

只要勾选如下图所示的复选框,那么,无论等待多久,屏幕都会一直保持亮蹭蹭的状态。

屏幕唤起锁定交互示意

语法与使用

要想屏幕保持唤起状态,很简单,一行代码的事情:

navigator.wakeLock.request('screen');

结束了,就这么简单。

结束了

由于保持屏幕唤醒是一个占用资源开销的操作,所以,浏览器有个行为,那就是如果当前页面最小化,或者非当前显示标签页,屏幕的Wake锁定行为会被释放,用户再切换过来的时候,就没有锁定了,因此,还需要其他代码的处理。

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    navigator.wakeLock.request("screen")
  }
});

还没完,如果仅仅只是wakeLock,在实操过程中,很容易重复执行唤醒锁定,因此,还需要知道什么时候释放了屏幕唤醒操作,以及如何主动释放禁止熄屏的功能。

这就要说一说 WakeLockSentinel 对象了,该对象是navigator.wakeLock.request(‘screen’)这个Promise执行后的返回值。

我们可以使用then()获取,例如:

let wakeLock = null;
navigator.wakeLock.request('screen').then(result => {
    wakeLock = result;
})

也可以使用async/await语法,例如:

let wakeLock = null;
async () => {
    wakeLock = await navigator.wakeLock.request('screen');
}

主动释放

想要释放熄屏锁定,则可以借助上面的wakeLock对象,代码示意:

wakeLock.release().then(() => {
  wakeLock = null;
});

以及,我们可以知道什么时候唤醒锁定是什么时候释放的,使用release事件:

wakeLock.addEventListener('release', () => {
    console.log('唤醒锁定已释放');
});

相关代码在demo演示页面均有体现。

三、劲酒虽好,可别贪杯

屏幕唤起锁定不是没有代价的,如果屏幕一直保持明亮,会阻止屏幕保护程序的启动,会影响显示器的寿命。

对于移动设备,屏幕往往是最耗电的,因此,阻止熄屏会带来更高的电量开销,因此,非必要场景是不推荐启用熄屏锁定的。

要求

此API要想生效,需要是https协议,或者是localhost本地环境。

兼容性

目前Chrome和Safari浏览器均已经支持wake-lock特性,Firefox已经开启实验支持,按照历史经验,没多久就会正式支持了,此API全面使用指日可待。

screen wake lock 兼容性

碎碎念时间

春节前新书写完,于是决定给自己放三个月的假,每天早睡,每周钓两场鱼,自然而然,文章更新频率就下来了。

一转眼,也是快40的人了,时间真的是块,今天还看了自己10年前的照片,仿佛就在昨天。

心态也变了很多,更平和,更稳定了,但也造成创造力下降了,以往的那些奇思妙想现在很难再迸发出来了,所以,究竟是变得更好还是有所退步,一时也说不清楚。

一直想什么时候弄个鱼塘玩玩,可惜当下没有那么多时间和精力,难道要等退休,或者兼职搞鱼塘,不行不行,没那么多时间。

哎呀,想远了,先换个可以随便养鱼的大房子再说吧。

🌙🌙🌙🌙

(本篇完)

分享到:


发表评论(目前6 条评论)

  1. 说道:

    这个API我已经用了一年多了

  2. 西红柿说道:

    这大神天天研究技术呢
    大神是在哪家公司上班阿

  3. mengkun说道:

    有一个 js 库专门实现这个功能的:
    https://github.com/richtr/NoSleep.js/

    还有基于它做的一个小工具网站:
    https://www.keepscreenon.com/

  4. xingguang说道:

    document.addEventListener(‘visibilitychange’, () => {
    if (document.visibilityState === ‘visible’) {
    navigator.wakeLock.request(“screen”)
    }
    });
    这里的 箭头函数的>被转义了,大佬可以修改下

  5. 菠菜说道:

    遇到个奇怪的问题,我在一个静态页面上调用此api没问题。
    我起了一个web服务器,通过以下两个地址访问也是可以
    http://127.0.0.1:5500/index.html
    http://localhost:5500/index.html

    但是通过下面两个地址访问就提示不支持Screen Wake Lock API!
    http://192.168.112.19:5500/index.html
    http://vtest.hunbei.com:5500/index.html
    一个是我本机ip,一个是我host内配置的自定义域名