Web应用屏幕常亮实现指南：告别自动休眠困扰

npm install nosleep.js
# 或者
yarn add nosleep.js

import NoSleep from 'nosleep.js';

// 创建 NoSleep 实例
const noSleep = new NoSleep();

// 定义一个函数来启用屏幕常亮
function enableNoSleep() {
  // 仅在屏幕未常亮时启用，避免重复操作
  if (!noSleep.isEnabled) {
    noSleep.enable();
    console.log('屏幕常亮功能已启用');
  }
}

// 定义一个函数来禁用屏幕常亮
function disableNoSleep() {
  if (noSleep.isEnabled) {
    noSleep.disable();
    console.log('屏幕常亮功能已禁用');
  }
}

// 推荐：在用户第一次交互时启用屏幕常亮
// 例如，监听 'touchstart' 或 'click' 事件
document.addEventListener('touchstart', enableNoSleep, { once: true });
document.addEventListener('click', enableNoSleep, { once: true });

// 如果你的应用有特定的开始/停止按钮，也可以绑定到这些按钮上
// 例如：
// document.getElementById('startButton').addEventListener('click', enableNoSleep);
// document.getElementById('stopButton').addEventListener('click', disableNoSleep);

import React, { useEffect, useRef } from 'react';
import NoSleep from 'nosleep.js';

const MyWebApp = () => {
  const noSleepRef = useRef(null);

  useEffect(() => {
    noSleepRef.current = new NoSleep();

    const handleUserInteraction = () => {
      if (noSleepRef.current && !noSleepRef.current.isEnabled) {
        noSleepRef.current.enable();
        console.log('NoSleep activated');
      }
    };

    // 监听用户交互事件，例如第一次点击或触摸
    document.addEventListener('touchstart', handleUserInteraction, { once: true });
    document.addEventListener('click', handleUserInteraction, { once: true });

    return () => {
      // 组件卸载时禁用 NoSleep，释放资源
      if (noSleepRef.current && noSleepRef.current.isEnabled) {
        noSleepRef.current.disable();
        console.log('NoSleep deactivated');
      }
      document.removeEventListener('touchstart', handleUserInteraction);
      document.removeEventListener('click', handleUserInteraction);
    };
  }, []);

  return (
    <div>
      <h1>我的常亮Web应用</h1>
      <p>请点击或触摸屏幕以启用屏幕常亮功能。</p>
      {/* 其他应用内容 */}
    </div>
  );
};

export default MyWebApp;

npm install use-stay-awake
# 或者
yarn add use-stay-awake

import React from 'react';
import useStayAwake from 'use-stay-awake';

const App = () => {
  // isAwake 默认为 true，即组件渲染时默认启用屏幕常亮
  const [isAwake, setIsAwake] = useStayAwake();

  const toggleAwake = () => {
    setIsAwake(!isAwake);
  };

  return (
    <div>
      <h1>使用 use-stay-awake Hook</h1>
      <p>设备将保持清醒，只要此页面处于焦点状态。</p>
      <p>当前屏幕常亮状态: {isAwake ? '已启用' : '已禁用'}</p>
      <button onClick={toggleAwake}>
        {isAwake ? '点击关闭屏幕常亮' : '点击开启屏幕常亮'}
      </button>
      {/* 其他应用内容 */}
    </div>
  );
};

export default App;