HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wakeLock — visibility</title>
</head>
<body>
  <p>Keep Awake is ON. Switch tabs to see visibility messages.</p>
  <pre id="out"></pre>
  <script>
    var out = document.getElementById("out");
    var lines = [];
    var sentinel = null;
    var wantLock = true;
    function log(msg) {
      lines.push(msg);
      out.textContent = lines.join("\n");
    }
    async function ensureWakeLock() {
      if (!wantLock || !("wakeLock" in navigator)) return;
      if (document.visibilityState !== "visible") return;
      try {
        sentinel = await navigator.wakeLock.request("screen");
        log("Wake Lock re-acquired");
      } catch (err) {
        log("Could not acquire: " + err.name);
      }
    }
    document.addEventListener("visibilitychange", function () {
      if (document.visibilityState === "visible") {
        ensureWakeLock();
      } else {
        log("Page hidden — lock may be released by the system");
      }
    });
    log("visibilityState: " + document.visibilityState);
    ensureWakeLock();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

wakeLock — visibility re-acquire (Try It)