Angular安卓网页如何实现屏幕无限常亮功能？

一、Screen Wake Lock API适配问题排查 #

• Service Worker干扰
  你当前启用了Service Worker，安卓Chrome中Service Worker的运行上下文与主应用隔离，可能导致navigator.wakeLock无法被检测到。可以临时禁用Service Worker测试：在angular.json中将serviceWorker配置设为false，重新构建后在安卓Chrome中验证API是否可用。

• Zone.js上下文限制
  Angular的Zone.js会包裹浏览器API调用，可能干扰WakeLock的初始化。尝试在NgZone外部执行检测代码：

  import { NgZone } from '@angular/core';
  
  constructor(private ngZone: NgZone) {}
  
  checkWakeLockSupport() {
    this.ngZone.runOutsideAngular(() => {
      const isSupported = 'wakeLock' in navigator && 'request' in (navigator as any).wakeLock;
      console.log('WakeLock支持状态:', isSupported);
    });
  }
  

• 安全上下文要求
  WakeLock API仅在安全上下文（HTTPS）下可用，本地调试时需通过ng serve --ssl开启HTTPS，否则安卓Chrome不会暴露该API。

二、替代方案：模拟媒体播放保持屏幕唤醒 #

若WakeLock API仍无法生效，可利用移动浏览器媒体播放时保持屏幕常亮的特性，通过隐藏视频元素实现：

1. 在组件模板中添加隐藏视频：

   <video #keepAwakeVideo playsinline muted loop style="position: fixed; top: -100%; left: -100%; width: 1px; height: 1px;"></video>
   

2. 在组件类中初始化并触发播放：

   import { ViewChild, ElementRef, OnInit } from '@angular/core';
   
   export class ScreenKeepAliveComponent implements OnInit {
     @ViewChild('keepAwakeVideo') keepAwakeVideo!: ElementRef<HTMLVideoElement>;
   
     ngOnInit() {
       // 创建空白视频Blob，避免加载外部资源
       const blankVideo = new Blob([], { type: 'video/mp4' });
       const videoUrl = URL.createObjectURL(blankVideo);
       this.keepAwakeVideo.nativeElement.src = videoUrl;
       
       // 需在用户交互后触发播放（部分浏览器限制自动播放）
       document.addEventListener('click', () => {
         this.keepAwakeVideo.nativeElement.play().catch(err => console.error('播放失败:', err));
       }, { once: true });
     }
   
     ngOnDestroy() {
       URL.revokeObjectURL(this.keepAwakeVideo.nativeElement.src);
     }
   }
   

三、额外注意事项 #

• 检查安卓设备是否开启省电模式，该模式会强制限制WakeLock等API的使用；
• 确保polyfills.ts中未禁用必要的浏览器API支持；
• 尝试升级Angular到最新稳定版本，部分旧版Zone.js存在已知的API兼容问题。

内容的提问来源于stack exchange，提问作者Edu Müller