Wake lock in Heroku Environment

Question

I have a website built with Python Flask (hosted on Heroku) and I am utilizing the js Wake Lock API to keep the user's device alive. Basically my site connects with the NHL's API and plays a goal horn when your team scores. I have added a Wake Lock toggle to the page where the app runs to allow users to enable the feature.

Here is my problem: I am being told Wake Lock is not compatible with the browser when I deployed to my production environment. Everything worked just fine locally when running in the same browser. Here is my Wake Lock code:

const checkbox = document.querySelector('#wakeLock');
const statusElem = document.querySelector('#wakeLockStatus')

const updateUI = (status = 'acquired') => {
  const acquired = status === 'acquired' ? true : false;
  checkbox.dataset.status = acquired ? 'on' : 'off';
  checkbox.checked = acquired ? true : false;
  statusElem.textContent = `Wake Lock ${acquired ? 'is active!' : 'is off.'}`;
}

// test support
let isSupported = false;

if ('wakeLock' in navigator) {
    isSupported = true;
    statusElem.textContent = 'Wake lock API is supported in your browser!';
} else {
    checkbox.disabled = true;
    statusElem.textContent = 'Wake lock is not supported by this browser.';
}

if (isSupported ) {
    // create a reference for the wake lock
    let wakeLock = null;

    // create an async function to request a wake lock
    const requestWakeLock = async () => {
        try {
            wakeLock = await navigator.wakeLock.request('screen');

            // change up our interface to reflect wake lock active
            updateUI()

            // listen for our release event
            wakeLock.onrelease = function(ev) {
                console.log(ev);
            }
            wakeLock.addEventListener('release', () => {
            // if wake lock is released alter the button accordingly
                updateUI('released');
            });

            console.log(wakeLock)

        } catch (err) {
            // if wake lock request fails - usually system related, such as battery
            checkbox.checked = false;
            statusElem.textContent = `${err.name}, ${err.message}`;
        }
    } // requestWakeLock()

    // toggle
    checkbox.addEventListener('click', () => {
        // if wakelock is off request it
        if (checkbox.dataset.status === 'off') {
          requestWakeLock()
        } else { // if it's on release it
          wakeLock.release()
            .then(() => {
              wakeLock = null;
            })
        }
    })

}

Like I said, this was working perfectly when testing locally, but when I deployed it no longer works. It is this part that is failing because I see the "Wake Lock is not supported in this browser" message on the front end. The app is hosts on Heroku, if that matters.

// test support
let isSupported = false;

if ('wakeLock' in navigator) {
    isSupported = true;
    statusElem.textContent = 'Wake lock API is supported in your browser!';
} else {
    checkbox.disabled = true;
    statusElem.textContent = 'Wake lock is not supported by this browser.';
}

Link to website: www.nhlcompanion.com Pick a team and click start to see the Wake Lock toggle and message I am talking about.

Thank you in advance for any help!!

Answer 1

I found the solution. Wake Lock requires HTTPS and I was just using an HTTP connection as I was still using the free Heroku plan. I have upgraded and it is working as expected.