Shriyank Mendpara
Shriyank Mendpara

Reputation: 21

WakeLock API not working in Safari (iOS) but working in Windows/android platform with same code

I want to enable wake lock API. It is working fine with Windows platform and android devices but not in Safari or iOS devices.

Console has error NotAllowed, Permission was denied in Safari Browser.

I tried with below code

if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
     let wakeLock = null;

            const requestWakeLock = async () => {
                try {
                    wakeLock = await navigator.wakeLock.request('screen');
                    wakeLock.addEventListener('release', (e) => {
                        console.log(e);
                        console.log('Wake Lock was released');
                    });
                    console.log('Wake Lock is active');
                } catch (e) {
                    console.error(`${e.name}, ${e.message}`);
                }
            };

            requestWakeLock();

            const handleVisibilityChange = () => {
                if (wakeLock !== null && document.visibilityState === 'visible') {
                    requestWakeLock();
                }
            };

            document.addEventListener('visibilitychange', handleVisibilityChange);
}

Add button and trigger click also returns same error.

let button = document.createElement("button");
button.addEventListener('click', function(){
     console.log('button clicked');
     requestWakeLock();
});

button.click();

Upvotes: 2

Views: 942

Answers (1)

Leo
Leo

Reputation: 41

Update:

Sorry for the confusion, I did some tests and found wakeLock.request only works after we first touched the screen on iOS. I added

document.addEventListener('click', () => {     
    navigator.wakeLock.request() 
})

and it works.

It seems like iOS(17.5.1) has this issue, I found an issue(https://bugs.webkit.org/show_bug.cgi?id=254545) related to this problem.

Upvotes: 2

Related Questions