页面重载后navigator.mediaSession.metadata更新失效问题

这不是MediaSession接口的规范bug，是实例复用逻辑在页面重载场景触发了浏览器的上下文校验限制：

• 首次冷启动页面时，currentMetadata初始值为null，新建MediaMetadata实例赋值给navigator.mediaSession.metadata的流程完全符合浏览器预期，系统媒体通知可以正常读取自定义配置
• 触发页面重载时（尤其是桌面端Chrome、移动端主流浏览器默认启用的往返缓存bfcache场景），浏览器会保留全局navigator.mediaSession的底层实例，但你代码中持有的currentMetadata属于旧页面上下文的残留引用，浏览器安全策略会判定跨上下文复用的实例无效，直接回退展示默认站点信息：标题取当前页面URL，封面取站点favicon
• 完全关闭页面再重新打开时，整个浏览器渲染上下文被彻底销毁，没有残留引用冲突，功能自然恢复正常

核心原则是不要复用历史创建的MediaMetadata实例，每次更新元数据时都创建全新实例再赋值，即可避开上下文引用冲突，修改后的参考实现如下：

//...
initialConfiguration: {
    title: 'Initial Title',
    artist: 'Initial Artist',
    album: '',
    artwork: [
        { src: "initial/artwork/url.jpg", sizes: "512x512", type: "image/jpg" },
    ]
},
setMediaSessionMetaData: function(){
    if (!('mediaSession' in navigator)) return;

    // 按需生成对应元数据配置，不复用旧实例
    const targetMeta = this.currentMetadata 
        ? {
            title: "New Title",
            artist: "New Artist",
            artwork: [
                { src: "new/artwork/url.jpg", sizes: '512x512', type: "image/jpg" },
            ]
        }
        : { ...this.initialConfiguration };
    
    // 始终传入全新构造的MediaMetadata实例完成赋值
    navigator.mediaSession.metadata = new MediaMetadata(targetMeta);
    // 若业务逻辑需要持有当前元数据引用，在赋值完成后同步更新内部变量
    this.currentMetadata = navigator.mediaSession.metadata;
},
//...

• 不要在页面初始化阶段直接设置元数据，必须把赋值逻辑放在用户主动触发的play事件回调中执行，重载场景下浏览器对非用户交互触发的媒体接口调用拦截规则更严格
• 配置的artwork资源需要保证可正常访问：同域资源直接可用，跨域资源需要配置合法CORS响应头，否则资源加载失败时通知会自动回退展示默认favicon
• 元数据赋值完成后，需要同步设置navigator.mediaSession.playbackState = 'playing'，部分系统的媒体通知栏只会在播放状态匹配时拉取自定义元数据

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