jsnotes

Topic 003: Screen WakeLock

Topic 003: Screen WakeLock

Screen WL 000

If you want to achieve a similar functionality without creating an HTML file, you can still use the same JavaScript code within a browser console. Here’s how you can do it:

  1. Open Google Chrome or any other browser that supports the Screen Wake Lock API.
  2. Open a new tab.
  3. Right-click on the page and select “Inspect” or press Ctrl + Shift + I (or Cmd + Option + I on macOS) to open the Developer Tools.
  4. Go to the “Console” tab within the Developer Tools.

Now, you can directly enter and execute JavaScript code in the console. Copy and paste the following code into the console and press Enter:

async function requestWakeLock() {
  try {
    // Request a wake lock
    const wakeLock = await navigator.wakeLock.request("screen");
    console.log("Screen wake lock activated!");

    // Listen for the release event
    wakeLock.addEventListener("release", () => {
      console.log("Screen wake lock released.");
    });

    // For demonstration, release the lock after 10 seconds
    setTimeout(() => {
      wakeLock.release();
      console.log("Screen wake lock released.");
    }, 10000);
  } catch (error) {
    console.error("Failed to request wake lock:", error);
  }
}

requestWakeLock();

This code will immediately request a screen wake lock when executed in the console. You will see the console messages indicating the activation and release of the wake lock. After 10 seconds, the lock will be released automatically, as per the setTimeout function in the code.

Remember that executing JavaScript in the browser console is temporary and won’t persist after you reload the page or close the browser. If you need this functionality to persist across sessions, you would need to implement it within a web page or browser extension.

Screen WL 001

To keep the screen awake for one hour using JavaScript, you can achieve this with minimal code by continuously requesting a wake lock. However, please note that continuously keeping the screen awake for such a long duration might not be a good practice due to battery consumption and potential device overheating. Nonetheless, if you need to do so, here’s the minimal code:

(async function () {
  try {
    const wakeLock = await navigator.wakeLock.request("screen");
    console.log("Screen wake lock activated for 1 hour.");

    // Release the lock after one hour (3600000 milliseconds)
    setTimeout(() => {
      wakeLock.release();
      console.log("Screen wake lock released after 1 hour.");
    }, 3600000);
  } catch (error) {
    console.error("Failed to request wake lock:", error);
  }
})();

This code will request a wake lock for the screen and release it after one hour (3600000 milliseconds). Please be cautious when using this code, as it can have significant impacts on battery life and device temperature. Always consider the implications before implementing such functionality.

Screen WL 002

Sure, you can create a browser bookmark with JavaScript code that you can click to execute whenever you need to keep the screen awake. Here’s how:

  1. Right-click on your browser’s bookmarks bar.
  2. Select “Add Page…” or “Add Page Shortcut…” or similar, depending on your browser.
  3. In the “Name” field, enter a name for your bookmark, like “Keep Screen Awake”.
  4. In the “URL” or “Location” field, paste the following JavaScript code:
javascript: (async function () {
  try {
    const wakeLock = await navigator.wakeLock.request("screen");
    console.log("Screen wake lock activated for 1 hour.");

    // Release the lock after one hour (3600000 milliseconds)
    setTimeout(() => {
      wakeLock.release();
      console.log("Screen wake lock released after 1 hour.");
    }, 3600000);
  } catch (error) {
    console.error("Failed to request wake lock:", error);
  }
})();
  1. Click “Save” or “Add”.

Now, whenever you need to keep the screen awake, simply click on this bookmark, and it will execute the JavaScript code in the current browser tab’s console. This way, you won’t need to manually type or paste the code every time.

Screen WL 003

To achieve console log messages at intervals indicating the duration for which the wake lock is active, you can modify the JavaScript code to log messages every 5 minutes. Here’s how you can do it:

(async function () {
  try {
    const wakeLock = await navigator.wakeLock.request("screen");
    console.log("Screen wake lock activated.");

    let duration = 0; // Initialize duration counter

    // Log messages every 5 minutes
    const logInterval = setInterval(() => {
      duration += 5; // Increment duration by 5 minutes
      console.log(`Screen wake lock active for ${duration} minutes.`);
    }, 300000); // 5 minutes in milliseconds

    // Release the lock after one hour (3600000 milliseconds)
    setTimeout(() => {
      clearInterval(logInterval); // Stop logging messages
      wakeLock.release();
      console.log("Screen wake lock released after 1 hour.");
    }, 3600000);
  } catch (error) {
    console.error("Failed to request wake lock:", error);
  }
})();

In this modified code:

This will log messages to the console every 5 minutes indicating the duration for which the wake lock has been active.