iOS 16中Media Session API使用疑问：PWA锁屏媒体跳转异常

问题本质 #

这是iOS 16对Media Session API的处理逻辑变更导致的兼容差异，并非系统bug——iOS 16在元数据绑定、Action Handler管理上的行为和iOS 15完全不同，才引发了这些异常。

具体解决步骤 #

1. 修复锁屏应用识别与跳转异常
   iOS 16设置MediaMetadata时会覆盖默认的应用关联信息，不再自动继承PWA Manifest里的标识，需要手动补充应用相关字段：

   const metadata = new MediaMetadata({
     title: '当前音频标题',
     artist: '你的PWA应用名称', // 核心：通过该字段绑定应用标识
     album: '应用分类/专辑名',
     artwork: [{ src: '音频封面地址', sizes: '512x512', type: 'image/png' }]
   });
   navigator.mediaSession.metadata = metadata;
   

   同时确认manifest.json中的name、short_name、scope字段配置正确，scope要严格限定应用的访问范围，避免系统误匹配其他PWA。

2. 解决单个Action Handler重置所有操作的问题
   iOS 16中设置单个自定义Action时，会清除系统默认绑定的所有播放器操作，必须显式绑定所有必要的默认操作，不能只设置单个Handler：

   // 先绑定所有默认播放器操作（即使逻辑为空，也要保留绑定）
   navigator.mediaSession.setActionHandler('play', () => { /* 你的播放逻辑 */ });
   navigator.mediaSession.setActionHandler('pause', () => { /* 你的暂停逻辑 */ });
   navigator.mediaSession.setActionHandler('previoustrack', () => { /* 上一曲逻辑 */ });
   navigator.mediaSession.setActionHandler('nexttrack', () => { /* 下一曲逻辑 */ });
   // 再添加你的自定义Action
   navigator.mediaSession.setActionHandler('seekforward', () => { /* 快进逻辑 */ });
   

验证方法 #

调整完成后，重新将PWA添加到iOS 16设备主屏幕，播放音频时锁屏组件应能正确显示应用名称，点击封面可跳转回你的PWA，同时所有播放器操作均可正常触发。

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