Prevent display turn off in a Mobile Browser

Question

I'm creating a Mobile Based web page & I'm using web socket connection to handle a chat room. But I want the display turning on every time when user go to the web page by mobile browser.

I tried to simulate Button Click from,

function eventFire(el, etype){
    if (el.fireEvent) { 
          el.fireEvent('on' + etype); 
     } else {
        var evObj = document.createEvent('Events');
        evObj.initEvent(etype, true, false); 
        el.dispatchEvent(evObj); 
     } 
}

But still mobile display turn off after particular time. Please can anyone help me with this??

Answer 1

There is a Working Draft for a new Wake Lock API, which doesn't seem to be implemented anywhere.

For now, you can take a look at NoSleep.js:

Prevent display sleep and enable wake lock in all Android and iOS web browsers.

It requires user interaction though, meaning you have to attach it to a user input event handler (eg mouse/touch).

Answer 2

Since most mobile OSs require user interaction to stop the screen from going to sleep this is impossible from a website. You'll need to make a native app.