PWA在Android设备锁屏后音频播放数分钟停止，如何阻止Chrome终止播放？

1. 修复锁屏后5分钟音频停止问题 #

核心原因是Android Chrome未将你的页面识别为活跃媒体播放进程，被系统省电策略自动挂起，需要通过Media Session API告知系统当前播放状态，提升进程优先级：

• 注册媒体会话，关联你的音频元素，示例代码如下：

const audioElement = document.querySelector('audio');
// 同步播放状态到系统媒体会话
audioElement.addEventListener('play', () => {
  navigator.mediaSession.playbackState = 'playing';
});
audioElement.addEventListener('pause', () => {
  navigator.mediaSession.playbackState = 'paused';
});
// 监听系统媒体控制动作（含锁屏控制按钮）
navigator.mediaSession.setActionHandler('play', () => audioElement.play());
navigator.mediaSession.setActionHandler('pause', () => audioElement.pause());
// 可选：配置媒体元数据，锁屏界面会展示播放内容信息
navigator.mediaSession.metadata = new MediaMetadata({
  title: '当前音频标题',
  artist: '音频作者',
  artwork: [{ src: '封面图路径', sizes: '96x96', type: 'image/png' }]
});

• 在PWA的manifest.json中补充权限声明，提升后台优先级：

{
  "display": "standalone",
  "permissions": ["audio"],
  // 其余原有manifest配置保持不变
}

2. 修复解锁后续播从头播放问题 #

该问题是后台进程被临时挂起后，音频元素的缓冲和播放进度属性被重置导致，需要本地持久化存储播放进度：

• 定时存储播放进度到本地存储：

let progressTimer;
// 播放时每1.5秒存一次进度
audioElement.addEventListener('play', () => {
  progressTimer = setInterval(() => {
    localStorage.setItem('lastAudioId', '当前播放音频的唯一标识');
    localStorage.setItem('lastPlayPosition', audioElement.currentTime);
  }, 1500);
});
// 暂停、切后台时主动存一次进度
audioElement.addEventListener('pause', () => {
  clearInterval(progressTimer);
  localStorage.setItem('lastPlayPosition', audioElement.currentTime);
});
document.addEventListener('visibilitychange', () => {
  if (document.hidden) localStorage.setItem('lastPlayPosition', audioElement.currentTime);
});

• 播放前先恢复上次的进度：

async function handlePlay() {
  const lastAudioId = localStorage.getItem('lastAudioId');
  const lastPosition = parseFloat(localStorage.getItem('lastPlayPosition'));
  // 同一个音频才恢复进度
  if (lastAudioId === '当前要播放的音频ID' && !isNaN(lastPosition)) {
    audioElement.currentTime = lastPosition;
  }
  await audioElement.play();
}

3. 额外适配注意事项 #

• 引导用户将PWA安装到桌面，普通标签页打开的页面进程优先级远低于已安装的PWA，更容易被系统清理
• 不要依赖setTimeout/setInterval做播放核心逻辑控制，锁屏后Chrome会大幅降低定时器触发频率，所有状态判断要绑定音频元素的原生事件
• 部分国产Android系统的省电策略会额外限制后台播放，可在首次启动时引导用户给PWA开启后台活动、允许后台播放音频的系统权限

内容的提问来源于stack exchange，提问作者HRN