Wakelock on mobile - preventing the screen from turning off

its been a while between posts, however this was useful to me and thought it could be for others and me when I need this again.

If you have ever encountered and issue where you are developing an app and its use on mobile where the screen turns off after inactivity but you are still operating the app (maybe via voice?) or reading a recipe or some detailed instructions?

Well the way I have resolved this is using the Screen Wake Lock API:

To do it you’ll need a few things, the toolbox plugin and 5 mins.

in this example I use buttons to set the wakelock status, and remember … the screen wont turn off if the user doesn’t navigate, so consider this.

Here is some helpful AI built instructions, change as needed.

Step 1: Setup Bubble Elements

  1. Create Text Elements:
  • Add a text element to your page to display the wake lock status. Name it something like WakeLockStatus.
  1. Create a Button to Request Wake Lock:
  • Add a button element that will trigger the wake lock request. Name it something like RequestWakeLockButton.
  1. Create a Button to Release Wake Lock:
  • Add another button to release the wake lock. Name it something like ReleaseWakeLockButton.

Step 2: Add JavaScript Code

  1. Add JavaScript to Request Wake Lock:
  • In the workflow of the RequestWakeLockButton, add a new action to run JavaScript using the JavaScript ToolBox plugin.
  • Insert the following JavaScript code:
let wakeLock = null;
let statusElement = document.getElementById("WakeLockStatus");

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      statusElement.innerHTML = 'Wake Lock Released';
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    statusElement.innerHTML = 'Wake Lock Active';
    console.log('Screen Wake Lock active');
  } catch (err) {
    statusElement.innerHTML = `Error: ${err.name}, ${err.message}`;
    console.error(`${err.name}, ${err.message}`);
  }
}

requestWakeLock();

Add JavaScript to Release Wake Lock:

  • In the workflow of the ReleaseWakeLockButton, add a new action to run JavaScript using the JavaScript ToolBox plugin.
  • Insert the following JavaScript code:
let statusElement = document.getElementById("WakeLockStatus");

if (wakeLock !== null) {
  wakeLock.release()
    .then(() => {
      wakeLock = null;
      statusElement.innerHTML = 'Wake Lock Released';
      console.log('Screen Wake Lock released manually');
    });
} else {
  statusElement.innerHTML = 'No Wake Lock to Release';
}

Handle Page Visibility Changes:

  • To handle page visibility changes, you can modify the JavaScript in the RequestWakeLockButton action to include an event listener for visibility changes:
document.addEventListener('visibilitychange', async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
});

Step 3: Update HTML IDs for Bubble Elements

(or check the ID in a text elements id field rather than worry about the html part).

Bubble elements don’t directly expose their HTML IDs, but you can use the JavaScript ToolBox plugin to manipulate them. To ensure your text element and buttons have specific IDs, you can add HTML elements with those IDs directly in Bubble’s HTML element feature.

  1. Add HTML Elements:
  • Use an HTML element in your Bubble page to define the IDs:
<div id="WakeLockStatus">Wake Lock Status: Unknown</div>
3 Likes