各位靓仔靓女，晚上好！我是今晚的讲师，很高兴能和大家一起聊聊这个听起来有点科幻，但其实很实用的CSS Screen Wake Lock API。
今天我们要聊的是一个关于“永不熄灭的爱”……不是，是“永不熄灭的屏幕”的话题。 你有没有遇到过这种情况：你在看小说看得正嗨，结果屏幕突然黑了？或者你在用手机导航，关键时刻屏幕熄灭导致你迷路了？这感觉，就像煮熟的鸭子飞了，到嘴的媳妇跑了，相当难受。
CSS Screen Wake Lock API 正是为了解决这个问题而生的。它允许我们通过CSS控制屏幕保持常亮，避免在关键时刻被打断。 这东西目前还是个提案（草案），属于“前沿科技”，不过已经有一些浏览器开始实验性地支持了。所以，我们今天就来一起探索一下这个“黑科技”。
一、什么是 Screen Wake Lock API？
简单来说，Screen Wake Lock API 就像给你的屏幕打了一针“鸡血”，告诉浏览器：“嘿，哥们，现在别让屏幕熄灭，我有重要的事情要做！”。 它允许网页应用请求一个 wake lock (唤醒锁)，阻止设备进入屏幕关闭或锁定的状态。
想象一下，你在做一个在线演示，或者玩一个需要长时间操作的游戏，或者像我一样，正在慷慨激昂地给大家讲课（虽然你们看不到我的表情），如果屏幕突然黑掉，那场面得多尴尬！
二、为什么需要 CSS Screen Wake Lock API？
你可能会问，之前不是有 JavaScript 的 Wake Lock API 吗？为什么还要 CSS 版本的？
问得好！这个问题问到了点子上。虽然 JavaScript 的 Wake Lock API 已经存在，但它存在一些局限性：
- 需要 JavaScript 代码： 这意味着你需要编写额外的 JavaScript 代码来请求和释放 wake lock。对于一些简单的场景，这显得有点过于繁琐。
- 依赖 JavaScript 执行： 如果 JavaScript 代码出现错误，或者用户禁用了 JavaScript，那么 wake lock 就无法正常工作。
- 状态管理复杂： 需要手动管理 wake lock 的生命周期，确保在不再需要的时候及时释放，否则会浪费电量。
而 CSS Screen Wake Lock API 的优势在于：
- 声明式语法： 可以通过简单的 CSS 声明来控制 wake lock，无需编写复杂的 JavaScript 代码。
- 更强的容错性： 即使 JavaScript 代码出现问题，CSS wake lock 仍然可以正常工作。
- 更方便的状态管理： 浏览器可以自动管理 wake lock 的生命周期，减少开发者的负担。
- 方便控制： 可以通过媒体查询等 CSS 特性，根据不同的屏幕尺寸、设备方向等条件来控制 wake lock 的行为。
总而言之，CSS Screen Wake Lock API 更加简洁、可靠、灵活，是 JavaScript Wake Lock API 的一个很好的补充。
三、CSS Screen Wake Lock API 的语法
CSS Screen Wake Lock API 的核心是一个新的 CSS 属性：screen-wake-lock。这个属性可以接受以下几个值：
auto： 默认值。浏览器可以根据自身的策略来决定是否允许屏幕熄灭。wake-lock： 请求一个 wake lock，阻止屏幕熄灭。none： 释放 wake lock，允许屏幕熄灭。
用法非常简单，就像你给元素设置 display: flex; 一样：
.keep-awake {
screen-wake-lock: wake-lock;
}这样，只要元素 .keep-awake 出现在屏幕上，浏览器就会尝试获取一个 wake lock，保持屏幕常亮。 当元素从屏幕上移除，或者 screen-wake-lock 属性被设置为 none 或 auto 时，wake lock 就会被释放。
四、代码示例
让我们来看几个具体的代码示例，更好地理解 CSS Screen Wake Lock API 的用法。
示例 1：一个简单的常亮开关
<!DOCTYPE html>
<html>
<head>
<title>CSS Screen Wake Lock Demo</title>
<style>
#wakeLockToggle {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
.active {
screen-wake-lock: wake-lock;
}
.inactive {
screen-wake-lock: auto; /* 或者 screen-wake-lock: none; */
}
</style>
</head>
<body>
<button id="wakeLockToggle" class="inactive">开启屏幕常亮</button>
<script>
const wakeLockToggle = document.getElementById('wakeLockToggle');
wakeLockToggle.addEventListener('click', () => {
if (wakeLockToggle.classList.contains('inactive')) {
wakeLockToggle.classList.remove('inactive');
wakeLockToggle.classList.add('active');
wakeLockToggle.textContent = '关闭屏幕常亮';
} else {
wakeLockToggle.classList.remove('active');
wakeLockToggle.classList.add('inactive');
wakeLockToggle.textContent = '开启屏幕常亮';
}
});
</script>
</body>
</html>在这个例子中，我们创建了一个按钮，点击按钮可以切换屏幕常亮的状态。 通过 JavaScript 代码，我们动态地添加和移除 CSS 类 active 和 inactive，从而控制 screen-wake-lock 属性的值。
示例 2：结合媒体查询使用
/* 默认情况下，允许屏幕熄灭 */
body {
screen-wake-lock: auto;
}
/* 当屏幕宽度大于 768px 时，保持屏幕常亮 */
@media (min-width: 768px) {
body {
screen-wake-lock: wake-lock;
}
}在这个例子中，我们使用了媒体查询，只有当屏幕宽度大于 768px 时，才会请求 wake lock，保持屏幕常亮。 这种方式可以根据不同的屏幕尺寸，灵活地控制 wake lock 的行为。 比如说，在桌面端保持屏幕常亮，而在移动端允许屏幕熄灭，以节省电量。
示例 3：结合 CSS 动画使用
<!DOCTYPE html>
<html>
<head>
<title>CSS Screen Wake Lock Demo</title>
<style>
.animating {
animation: rotate 5s linear infinite;
screen-wake-lock: wake-lock;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="animating">
旋转的元素
</div>
</body>
</html>在这个例子中，我们创建了一个旋转的元素，并给它添加了 screen-wake-lock: wake-lock; 属性。 只要这个元素在旋转，屏幕就会保持常亮。 当动画停止时，wake lock 就会被释放。
五、兼容性问题
正如我之前提到的，CSS Screen Wake Lock API 目前还是一个提案，因此兼容性还不是很好。 在编写这篇文章的时候，只有一些实验性的浏览器版本支持这个 API。
可以使用以下方法检测浏览器是否支持 screen-wake-lock 属性：
if ('screenWakeLock' in document) {
console.log('CSS Screen Wake Lock API is supported!');
} else {
console.log('CSS Screen Wake Lock API is not supported.');
}或者，也可以通过 CSS 的 @supports 规则来检测：
@supports (screen-wake-lock: wake-lock) {
/* 浏览器支持 screen-wake-lock 属性 */
body {
/* 启用 wake lock */
}
}如果浏览器不支持 screen-wake-lock 属性，可以考虑使用 JavaScript 的 Wake Lock API 作为备选方案。
六、注意事项
在使用 CSS Screen Wake Lock API 时，需要注意以下几点：
- 权限问题： 浏览器可能会要求用户授予网页应用访问 wake lock 的权限。
- 电量消耗： 保持屏幕常亮会增加电量消耗，因此应该谨慎使用 wake lock，只在必要的时候才请求。
- 用户体验： 不要过度使用 wake lock，以免影响用户体验。 应该让用户能够方便地控制屏幕常亮的状态。
- 释放 wake lock： 当不再需要保持屏幕常亮时，应该及时释放 wake lock，以节省电量。
- 安全问题： 避免滥用 wake lock，防止恶意网站利用 wake lock 来进行 DoS 攻击。
七、CSS 和 JS Wake Lock API 对比
为了更清晰地了解 CSS 和 JS Wake Lock API 的区别，我整理了一个表格：
| 特性 | CSS Screen Wake Lock API | JavaScript Wake Lock API |
|---|---|---|
| 语法 | 声明式 (CSS) | 命令式 (JavaScript) |
| 依赖 | 无需 JavaScript 代码 (仅需 CSS) | 需要 JavaScript 代码 |
| 容错性 | 更强 (即使 JavaScript 代码出错，CSS 仍可能生效) | 较弱 (依赖 JavaScript 代码正常执行) |
| 状态管理 | 浏览器自动管理 wake lock 的生命周期 | 需要手动管理 wake lock 的生命周期 (请求和释放) |
| 适用场景 | 简单的屏幕常亮需求，例如：在特定元素显示时保持屏幕常亮，配合媒体查询进行条件控制 | 更复杂的场景，例如：需要根据用户的行为动态地控制 wake lock，或者需要处理 wake lock 被系统中断的情况 (例如：电量不足) |
| 代码量 | 更少 (通常只需要几行 CSS 代码) | 更多 (需要编写 JavaScript 代码来请求、释放和管理 wake lock) |
| 灵活性 | 配合 CSS 的媒体查询、动画等特性，可以实现更灵活的控制 | 更灵活 (可以通过 JavaScript 代码进行更精细的控制) |
| 浏览器支持 | 仍在实验阶段，支持的浏览器较少 | 相对较好 (但仍然需要考虑不同浏览器的兼容性) |
| 权限要求 | 浏览器可能需要用户授予权限 | 浏览器可能需要用户授予权限 |
八、总结与展望
CSS Screen Wake Lock API 提供了一种更简洁、更可靠的方式来控制屏幕常亮。 它可以帮助我们创建更好的用户体验，避免在关键时刻被打断。
当然，由于它还处于提案阶段，因此在使用时需要注意兼容性问题，并谨慎使用 wake lock，以避免不必要的电量消耗。
未来，随着浏览器的不断发展，CSS Screen Wake Lock API 可能会得到更广泛的支持，并成为 Web 开发的一个重要组成部分。 让我们一起期待它的到来！
好了，今天的分享就到这里。 感谢大家的聆听！ 如果大家有什么问题，欢迎提问。希望大家以后写代码的时候也能像屏幕一样，永不熄灭，激情满满！