Heroku 环境中的唤醒锁

问题描述

我有一个使用 Python Flask 构建的网站（托管在 Heroku 上），并且我正在利用 js 唤醒锁 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 选择一个团队并点击开始以查看唤醒锁定开关和我正在谈论的消息。

在此先感谢您的帮助！！

解决方法

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