Web网页实现阻止息屏

在平时中，我们可能将电脑屏幕息屏时间定的比较短，这样，在空闲的时候会息屏省电。而在另一方面有时在一些场景下我们可能需要保持屏幕常亮，比如看着屏幕演讲等。去手动修改系统设置是很麻烦的，所以这时候需要阻止息屏，就可以使用这里的Screen Wake Lock API了。

# API的基本使用

navigator.wakeLock.request('screen');

# 页面可视状态下的优化

上面API的使用只是锁定屏幕，在页面缩小，页面切换等状态下会自动停止，所以需要手动去优化，在恢复页面的时候继续保持常量

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

navigator.wakeLock.request(‘screen’)这个Promise执行后的返回值是WakeLockSentinel 对象，通过这个对象可以得到当前屏幕锁定的释放状态，结合使用上面的代码完成对唤醒锁定的自动开启和和状态监控

let wakeLock = null;
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    navigator.wakeLock.request('screen').then(result => {
      wakeLock = result;

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