Heroku 环境中的唤醒锁

Question

我有一个使用 Python Flask （托管在 Heroku 上）构建的网站，我正在使用 js Wake Lock API 来保持用户的设备存活。 基本上，我的网站与 NHL 的 API 相连，并在您的球队得分时播放球门号角。 我在应用程序运行的页面上添加了唤醒锁定开关，以允许用户启用该功能。

这是我的问题：当我部署到生产环境时，我被告知 Wake Lock 与浏览器不兼容。 在同一个浏览器中运行时，一切都在本地运行良好。 这是我的唤醒锁代码：

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;
            })
        }
    })

}

就像我说的，这在本地测试时工作得很好，但是当我部署它时它就不再工作了。 正是这部分失败了，因为我在前端看到“此浏览器不支持唤醒锁”消息。 该应用程序是 Heroku 上的主机，如果这很重要的话。

// 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.';
}

链接到网站： www.nhlcompanion.com选择一个团队并单击开始以查看我正在谈论的唤醒锁定切换和消息。

预先感谢您的任何帮助！！

Answer 1

我找到了解决方案。 唤醒锁需要 HTTPS而我只是使用 HTTP 连接，因为我仍在使用免费的 Heroku 计划。 我已经升级，它按预期工作。