Location>code7788 >text

Using the Wake Lock API: Best Practices for Keeping Devices Awake

Popularity：4 ℃/2024-09-19 11:20:04

In modern Web applications, especially when it comes to long-running tasks such as video playback, real-time communication, map navigation, etc., users often want the device to not automatically go into sleep mode or dim the screen due to idleness. To address this issue, the Web API provides an interface called Wake Lock that allows developers to request that the device remain awake.

This article details how to use the Wake Lock API to control the wake state of a device, provides sample code, and discusses some common usage scenarios, in particular how to ensure that the wake lock is managed automatically when a web page is hidden or displayed.

What is the Wake Lock API?

The Wake Lock API is a web API for preventing devices from going to sleep or dimming the screen.The Wake Lock API allows developers to request that a device be kept active, preventing tasks from being interrupted due to power management mechanisms.

Currently.The Wake Lock API supports only one type of wake lock:screenIt is used to keep the screen lit and prevent the screen from automatically turning off or dimming.

Prerequisites for using the Wake Lock API

  • Browser Support: The Wake Lock API is now supported in most modern browsers.
  • HTTPS Environment: This API requires HTTPS access to work properly.

basic use case

Here is a simple example showing how to use the Wake Lock API to keep the screen awake:

// create a global variable to store the WakeLock instance
let wakeLock = null;

// The function that requests the screen to stay awake
async function requestWakeLock() {
  async function requestWakeLock() { try {
    // Request the screen wake lock
    wakeLock = await ('screen'); ('Screen wake lock activated'); // Request a screen wake lock.
    ('Screen wake lock activated'); // Request screen wake lock.

    // Listen for the release of the wake lock
    ('release', () => {
      ('Screen wake lock has been released'); }); // Listen for the wake lock release event.
    }); }
  } catch (err) {
    (`${}, ${}`); }
  }
}

// Release the wake lock function
function releaseWakeLock() {
  if (wakeLock ! == null) {
    function releaseWakeLock(); if (wakeLock ! == null) {
    wakeLock = null; ('Screen Wake Lock Manual Release')
    ('Screen wake lock manually released');
  }
}

// Call the function to request the wake lock
requestWakeLock();

// Release the wake lock when the page is closed.
('beforeunload', releaseWakeLock); // release the wake lock when the page is closed.

Page visibility handling: automatic management of wake-up locks

Since the wake lock is automatically released when the page is hidden or switched to the background, we can listen to thevisibilitychange event to ensure that the wake lock is re-acquired when the page is visible again. The lock is requested again when the page is back in view and the wake lock is released when the page is hidden.

// create a global variable to store the WakeLock instance
let wakeLock = null;

// The function that requests the screen to stay awake
async function requestWakeLock() {
  async function requestWakeLock() { try {
    // Request the screen wake lock
    wakeLock = await ('screen'); ('Screen wake lock activated'); // Request the screen wake lock.
    ('Screen wake lock activated'); // Request screen wake lock.

    // Listen for a release event on the wake lock
    ('release', () => {
      ('Screen wake lock has been released'); }); // Listen for the wake lock release event.
    }); }
  } catch (err) {
    (`${}, ${}`); }
  }
}

// Release the wake lock function
function releaseWakeLock() {
  if (wakeLock ! == null) {
    function releaseWakeLock(); if (wakeLock ! == null) {
    wakeLock = null; ('Screen Wake Lock Manual Release')
    ('Screen wake lock manually released');
  }
}

// Handle the page visibility change
function handleVisibilityChange() {
  if ( === 'visible' ) {
    // Re-request the wake lock when the page is visible again.
    requestWakeLock();
  } else {
    // Release the wake lock when the page is hidden.
    releaseWakeLock(); } else { // When the page is hidden, release the wake lock.
  }
}

// Listen for page visibility change events
('visibilitychange', handleVisibilityChange); }

// Request a wake lock as soon as the page loads
requestWakeLock();

// Release the wake lock when the page closes.
('beforeunload', releaseWakeLock); // Request the wake lock immediately when the page is loaded.

Usage Scenarios

The Wake Lock API is useful in several typical scenarios:

1. Video or audio playback

In applications that play video or audio, users want the screen to stay lit so that the playback progress or volume can be adjusted at any time. With the Wake Lock API, keeping the screen awake while media is playing provides a better user experience.

('play', requestWakeLock);
('pause', releaseWakeLock);

2. Real-time communications applications

For real-time communication applications such as video calls, conferences, etc., screen shutdown can affect the user's interactive experience. Using the Wake Lock API, you can ensure that your device remains active during a call, preventing interruptions.

if (isInCall) {
  requestWakeLock();
} else {
  releaseWakeLock();
}

3. Navigation and map applications

In navigation apps, users often need to look at the screen for a long time to get information about their travel route. Using the Wake Lock API, you can ensure that the screen does not go out due to inactivity.

(() => {
  requestWakeLock();
}, () => {
  releaseWakeLock();
});

4. Games or full-screen applications

Web games or full-screen apps that require long user interactions can also utilize the Wake Lock API to avoid the screen suddenly going off during gameplay.

('fullscreenchange', () => {
  if () {
    requestWakeLock();
  } else {
    releaseWakeLock();
  }
});

Error handling and compatibility

While the Wake Lock API provides useful functionality, it may be limited by power management policies on some devices. Therefore, developers should include error handling when requesting a wake lock to ensure program robustness.

if ('wakeLock' in navigator) {
  requestWakeLock();
} else {
  ('Current browser does not support the Wake Lock API'); }
}

Browser compatibility

- Chrome Edge Firefox Opera Safari Chrome Android Firefox Android Opera Android Safari iOS Samsung Internet WebView Android
WakeLock 84 84 126 70 16.4 84 126 60 16.4 14.0 84
request 84 84 126 70 16.4 84 126 60 16.4 14.0 84

Safari for iOS

  • 16.4 (Released 2023-03-27)
  • Partial support
  • It does not take effect in the standalone home screen web application. For more information, please seebug 254545.

summarize

The Wake Lock API provides web developers with the ability to control the wake state of a device, and is especially suited for applications that need to keep the screen active for long periods of time, such as video playback, real-time communication, navigation, and more. By listening to thevisibilitychange event, the application can intelligently manage the state of the wake lock, reacquiring the lock when the page is visible and releasing it when it is hidden.

As more browsers support the Wake Lock API, it will become an important tool to enhance the user experience. If your app involves long tasks or needs to keep the screen lit, it is recommended to integrate this API to optimize the user experience.

<Previous Next>