Screen Wake Lock API In JavaScript

UpdatedNovember 2, 2024

Hi There, i'm Said Mounaim A passionate Intermediate Full Stack Developer having an experience of building responsive Web applications with JavaScript / React.js / Next.js / Node.js and some other cool libraries and frameworks.

A browser API to prevent the screen from dimming, sleeping or locking automatically,

This feature is very useful for application like timers, voice based application, live score updates, video players ... etc which don't want the screen to be auto locked.

**Note that there are some cases when the lock is removes automatically **

When the user navigate away from the tab
The user manually locks the screen

let screenLock = await navigator.wakeLock.request('screen');

await lock.release();

**Supported only in Chrome and Edge Currently. **

#javascript #apis #js #web-development

Comments (1)

Join the discussion

Surya Teja Karra3y ago

Please note, acc. to MDN, this is experimental technology and is majorly supported by Chrome & its forks and Samsung browser.

We, as developers, have a responsibility to ensure consistent experiences for our users across all supported platforms (in this case browsers). I feel like usage of this tech would hurt it.

I highly recommend providing a fallback like NoSleep.js at least for iOS & Android.

Reference: https://dev.to/mikeesto/the-screen-wake-lock-api-51hp

MDN: https://developer.mozilla.org/en-US/docs/Web/API/WakeLock#browser_compatibility

More from this blog

Next.js 15 Form Component: A Beginner's Guide

Hello everyone Next.js 15 introduces a new Form component that makes handling forms easier than ever. Let's take a quick look at how to use it! How to Use the Form Component First, import the Form component: import Form from 'next/form'; Now, let's ...

Nov 2, 20241 min read

Next.js 15 Form Component: A Beginner's Guide

Image Reveal Animation with HTML, CSS, and GSAP

This article demonstrates a simple image reveal animation when hovering over items. The HTML code represents a section with works, including images and titles. The CSS code provides the necessary styling for the layout and animation. The JavaScript c...

May 20, 20233 min read

Image Reveal Animation with HTML, CSS, and GSAP

Transitions an element's height

Hello Guuys! To transitions an element's height from 0 to auto when its height is unknown. Use transition to specify that changes to max-height should be transitioned over. Use overflow: hidden to prevent the contents of the hidden element from ove...

Mar 30, 20231 min read

Awesome Things Related To React Hooks 😍

awesome-react-hooks A curated list of awesome things related to React Hooks Resources Official Official Documentation Related awesome lists General Articles React Js Resize, Compress and Crop Image Size Tutorial How to use React useReducer hook...

Mar 11, 20236 min read

10 Cool React Animation Library

Here are 10 animation libraries for React that you can use to create animations in your React projects. Framer Motion (https://www.framer.com/motion/) - A React animation toolkit that makes simple animations using two APIs: Framer and Motion. Remot...

Jan 25, 20232 min read

Untitled Publication

15 posts

Command Palette

Comments (1)

More from this blog