如何解决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 计划。我已经升级,它按预期工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。