首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

使用 Wake Lock API:保持设备唤醒的最佳实践

编程知识
2024年09月18日 09:29

在现代 Web 应用中,尤其是涉及视频播放、实时通信、地图导航等长时间运行的任务时,用户常常希望设备不要因为空闲而自动进入睡眠模式或屏幕变暗。为了解决这一问题,Web API 提供了一个名为 Wake Lock 的接口,允许开发者请求设备保持唤醒状态。

本文将详细介绍如何使用 Wake Lock API 来控制设备的唤醒状态,提供示例代码,并讨论一些常见的使用场景,尤其是如何确保网页隐藏或显示时自动管理唤醒锁。

什么是 Wake Lock API?

Wake Lock API 是一个用于防止设备进入睡眠或屏幕变暗的 Web API。通过 Wake Lock API,开发者可以请求设备保持活跃状态,防止因为电源管理机制导致任务中断。

目前,Wake Lock API 只支持一种类型的唤醒锁:screen,它用于保持屏幕亮起,防止屏幕自动关闭或调暗。

使用 Wake Lock API 的前提

  • 浏览器支持:Wake Lock API 目前在大多数现代浏览器中都已经得到支持。
  • HTTPS 环境:该 API 需要通过 HTTPS 访问才能正常工作。

基本用例

以下是一个简单的示例,展示了如何使用 Wake Lock API 来保持屏幕唤醒:

// 创建一个全局变量来存储 WakeLock 实例
let wakeLock = null;

// 请求屏幕保持唤醒的函数
async function requestWakeLock() {
  try {
    // 请求屏幕唤醒锁
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('屏幕唤醒锁已激活');
    
    // 监听唤醒锁的释放事件
    wakeLock.addEventListener('release', () => {
      console.log('屏幕唤醒锁已释放');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
}

// 释放唤醒锁的函数
function releaseWakeLock() {
  if (wakeLock !== null) {
    wakeLock.release();
    wakeLock = null;
    console.log('屏幕唤醒锁手动释放');
  }
}

// 调用函数请求唤醒锁
requestWakeLock();

// 在页面关闭时释放唤醒锁
window.addEventListener('beforeunload', releaseWakeLock);

页面可见性处理:自动管理唤醒锁

由于当网页被隐藏或切换到后台时会自动释放唤醒锁,因此我们可以监听 visibilitychange 事件来确保网页重新可见时重新获取唤醒锁。当页面恢复显示时再次请求锁定,页面隐藏时则释放唤醒锁。

// 创建一个全局变量来存储 WakeLock 实例
let wakeLock = null;

// 请求屏幕保持唤醒的函数
async function requestWakeLock() {
  try {
    // 请求屏幕唤醒锁
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('屏幕唤醒锁已激活');
    
    // 监听唤醒锁的释放事件
    wakeLock.addEventListener('release', () => {
      console.log('屏幕唤醒锁已释放');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
}

// 释放唤醒锁的函数
function releaseWakeLock() {
  if (wakeLock !== null) {
    wakeLock.release();
    wakeLock = null;
    console.log('屏幕唤醒锁手动释放');
  }
}

// 处理页面可见性变化
function handleVisibilityChange() {
  if (document.visibilityState === 'visible') {
    // 页面重新可见时,重新请求唤醒锁
    requestWakeLock();
  } else {
    // 页面隐藏时,释放唤醒锁
    releaseWakeLock();
  }
}

// 监听页面可见性变化事件
document.addEventListener('visibilitychange', handleVisibilityChange);

// 页面加载时立即请求唤醒锁
requestWakeLock();

// 在页面关闭时释放唤醒锁
window.addEventListener('beforeunload', releaseWakeLock);

使用场景

Wake Lock API 在以下几种典型场景中非常有用:

1. 视频或音频播放

在播放视频或音频的应用中,用户希望屏幕保持亮起,以便可以随时调整播放进度或音量。通过 Wake Lock API,在媒体播放时保持屏幕唤醒,提供更好的用户体验。

videoElement.addEventListener('play', requestWakeLock);
videoElement.addEventListener('pause', releaseWakeLock);

2. 实时通信应用

对于视频通话、会议等实时通信应用,屏幕关闭会影响用户的互动体验。使用 Wake Lock API,可以确保设备在通话期间保持活跃,防止通话中断。

if (isInCall) {
  requestWakeLock();
} else {
  releaseWakeLock();
}

3. 导航和地图应用

在导航应用中,用户通常需要长时间查看屏幕来获取行进路线信息。使用 Wake Lock API,可以确保屏幕不会因为闲置而熄灭。

navigator.geolocation.watchPosition(() => {
  requestWakeLock();
}, () => {
  releaseWakeLock();
});

4. 游戏或全屏应用

网页游戏或需要长时间用户交互的全屏应用,也可以利用 Wake Lock API,避免游戏过程中屏幕突然熄灭。

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    requestWakeLock();
  } else {
    releaseWakeLock();
  }
});

错误处理和兼容性

虽然 Wake Lock API 提供了有用的功能,但它在某些设备上可能受到电源管理策略的限制。因此,开发者在请求唤醒锁时应当加入错误处理,以确保程序的健壮性。

if ('wakeLock' in navigator) {
  requestWakeLock();
} else {
  console.error('当前浏览器不支持 Wake Lock API');
}

浏览器兼容性

- Chrome Edge Firefox Opera Safari Chrome Android Firefox Android Opera Android Safari iOS Samsung Internet WebView Android
WakeLock 84 84 126 70 16.4 84 126 60 16.4 14.0 84
request 84 84 126 70 16.4 84 126 60 16.4 14.0 84

iOS 版 Safari

  • 16.4 (Released 2023-03-27)
  • 部分支持
  • 在独立的主屏幕Web应用程序不生效。详情请看 bug 254545.

总结

Wake Lock API 为 Web 开发者提供了控制设备唤醒状态的能力,尤其适合那些需要保持屏幕长时间活跃的应用,如视频播放、实时通信、导航等。通过监听 visibilitychange 事件,应用程序可以智能地管理唤醒锁的状态,在页面可见时重新获取锁定,隐藏时释放锁定。

随着更多浏览器对 Wake Lock API 的支持,它将会成为提升用户体验的重要工具。如果你的应用涉及到长时间的任务或需要保持屏幕亮起,建议集成这个 API 来优化用户体验。

From:https://www.cnblogs.com/guojikun/p/18418039
本文地址: http://www.shuzixingkong.net/article/2098
0评论
提交 加载更多评论
其他文章 Vue3.5中解构props,让父子组件通信更加丝滑
前言 在Vue3.5版本中响应式 Props 解构终于正式转正了,这个功能之前一直是试验性的。这篇文章来带你搞清楚,一个String类型的props经过解构后明明应该是一个常量了,为什么还没丢失响应式呢?本文中使用的Vue版本为欧阳写文章时的最新版Vue3.5.5 关注公众号:【前端欧阳】,给自己一
Vue3.5中解构props,让父子组件通信更加丝滑 Vue3.5中解构props,让父子组件通信更加丝滑 Vue3.5中解构props,让父子组件通信更加丝滑
揭秘最为知名的黑客工具之一: Netcat!适用安全测试、渗透测试、黑客攻击!
在网络安全领域,黑客工具一直备受关注。它们既可以被用于攻击,也可以用于防御。本文将为大家揭秘一款知名的黑客工具: Netcat。 1、Netcat是什么? Netcat被誉为“网络的瑞士军刀”,简称为 nc,是一个功能丰富的网络工具。最早是一个简单的TCP/IP工具,用于在网络上传输数据。随着时间的
这10种分布式ID,太绝了!
前言 分布式ID,在我们日常的开发中,其实使用的挺多的。 有很多业务场景在用,比如: 分布式链路系统的trace_id 单表中的主键 Redis中分布式锁的key 分库分表后表的id 今天跟大家一起聊聊分布式ID的一些常见方案,希望对你会有所帮助。 1 UUID UUID (Universally
这10种分布式ID,太绝了! 这10种分布式ID,太绝了! 这10种分布式ID,太绝了!
mongodb 中rs.stauts()命令参数解析
转载请注明出处: rs.status()命令用于获取MongoDB副本集的状态信息。它提供了关于副本集中各个节点的详细信息,包括节点的健康状况、角色、选举状态等。 以下是查看一个mongo集群状态返回的参数: rs0:PRIMARY> rs.status() { "set"
.NET 开源工业级移动端仓库管理系统
前言 在工业生产中,定制化的软件对于每个环节都至关重要。对于仓库管理,推荐一款开源的仓库管理系统(WMS)解决方案。 这款基于.NET 框架开发的移动应用,提供了全面的仓库操作、订单处理、主数据管理、数据分析及个人信息设置等功能,是工业仓库管理的有利助手。 项目介绍 SmoWMS 是一款基于.NET
.NET 开源工业级移动端仓库管理系统 .NET 开源工业级移动端仓库管理系统 .NET 开源工业级移动端仓库管理系统
Canvas简历编辑器-Monorepo+Rspack工程实践
Canvas简历编辑器-Monorepo+Rspack工程实践 在之前我们围绕Canvas聊了很多代码设计层面的东西,在这里我们聊一下工程实践。在之前的文中我也提到过,因为是本着学习的态度以及对技术的好奇心来做的,所以除了一些工具类的库例如 ArcoDesign、ResizeObserve
.net core8 使用JWT鉴权(附当前源码)
说明 该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发)。 该系统文章,我会尽量说的非常详细,做到不管新手、老手都能看懂。 说明:OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。 结合上一篇文章使用,味道更佳:.net
.net core8 使用JWT鉴权(附当前源码) .net core8 使用JWT鉴权(附当前源码) .net core8 使用JWT鉴权(附当前源码)
一文带你精通二项式反演!不服来看!
前言 原题:《二项式反演学习笔记》。 这里有我关于二项式反演的一些思考和领会,包含理论推导和在信息学竞赛中的应用。网络上的教程都太潦草了,难以深入理解。因此,这里将以详细的证明为主,介绍二项式反演在 OI 中的使用。 如果你只想快速浏览结论,可以点击这里查看结论。 概述 反演是一种将两个函数 \(f
一文带你精通二项式反演!不服来看!