如何在Android上使用Angular无限期保持网页屏幕常亮?

huangapple go评论74阅读模式
英文:

How to keep the screen on indefinitely on a web page on Android with Angular?

问题

我需要实现一个功能,使平板电脑和智能手机在我的应用程序的一个模块中保持屏幕开启。

我尝试使用屏幕唤醒锁定 API,但似乎与 Android 上的 Angular 存在一些不兼容性。它在 Windows 上无论是否使用 Angular 都可以工作;在 Android 上不使用 Angular 像这个演示中一样可以工作;但在带有 Angular 的 Android 上却无法工作,尽管我使用了演示中的完全相同的代码。

我遇到了与这里提出的相同问题,但我使用了建议的解决方案并设法解决了拼写错误的问题。然而,在仅在 Android 浏览器上运行时,新问题是,除非在 windownavigator 上没有 WakeLock,否则都无法工作。

我在带有 Angular 的 Android 上运行了以下测试,它们都返回 false,但在 Windows 浏览器中返回 true

'wakeLock' in navigator && 'request' in (navigator as any).wakeLock
'WakeLock' in window && 'request' in ((window as any).WakeLock as any)

是否需要进一步配置以使屏幕唤醒锁定 API 在带有 Angular 的 Android 上工作?

或者是否有其他方法可以使屏幕保持活动状态,超出设备上配置的时间,就像播放媒体一样?

我正在使用:

  • Angular 15 与 Service Worker;
  • 在 Chrome 和 Chrome Android 113 中进行测试;
英文:

I need to implement a functionality to keep the screens of tablets and smartphones on while they are in one of the modules of my application.

I tried using Screen Wake Lock API but there seems to be some incompatibility with Angular on Android. It works on Windows with or without Angular; works on android without Angular like in this demo; but it doesn't work on Android with Angular, even though I used exactly the same code from the demo.

I had the same problem presented here, but I used the proposed solutions and managed to get around the typo. However, the new issue is while running on Android browsers only, unless there is no WakeLock on window or navigator.

I ran the following tests on Android with Angular, and they all returned false, but returned true in the Windows browser:

'wakeLock' in navigator && 'request' in (navigator as any).wakeLock
'WakeLock' in window && 'request' in ((window as any).WakeLock as any)

Is there any further configuration required for the Screen Wake Lock API to work on Android with Angular?

Or is there any other way to keep the screen active beyond the time configured on the device, as if it were playing some media?

I'm using:

  • Angular 15 with Service Worker;

  • Tests in Chrome and Chrome Android 113;

答案1

得分: 0

需要使用 HTTPS 使应用程序可用!

正如MDN Web Docs中所警告的:

> 安全上下文:此功能仅在安全上下文(HTTPS)中可用,某些或所有支持的浏览器中可用。

默认情况下,HTTPS似乎是必需的,例如在Android浏览器中,但出于某种原因,Windows浏览器不需要这样做。

英文:

It is necessary to make the application available with HTTPS!

As warned in MDN Web Docs:

> Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

By default HTTPS seems to be required to work, as in the case of the Android browser, but the Windows browser does not require this, for some reason.

huangapple
  • 本文由 发表于 2023年5月10日 21:41:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/76219162.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定