Screen Wake Lock PWA Demo

Demo

Install the app, open it from your homescreen, then tap the button below to lock the screen.

Limitations

While the Wake Lock functions as expected on iOS Safari 16.4 or higher, it regrettably does not appear functional within PWAs when installed on iPhones or iPads (bug report).

The device may refuse to wake lock the screen for various reasons: low-battery, user preferences, etc. It's generally good practice to handle these cases by wrapping navigator.wakeLock.request() in a try...catch statement.

If the user minimizes a tab, closes a window, or navigates away from the PWA in which a screen wake lock is active, the lock will be released automatically.

Use Cases

The Wake Lock API is useful in certain specific scenarios where uninterrupted screen display and system activity are essential.

For instance, a PWA that streams or records video can utilize the Wake Lock API to prevent screens from dimming or devices from entering sleep mode during playback.

Similarly, real-time collaboration tools can ensure that devices remain awake during active sessions, preventing unexpected disruptions.

The Wake Lock API is a good way to overcome some other limitations of PWAs. For example, audio-recording and geolocation may be interrupted if the devices goes to sleep. By keeping the device awake, you ensure these functions continue working as intended.

Code

Links & Documentation

• Screen Wake Lock API on MDN
• WebKit Bug #254545