navigator.mediaSession.metadata 在页面重新加载后不更新答案

【问题标题】：navigator.mediaSession.metadata not updating after page reloadnavigator.mediaSession.metadata 在页面重新加载后不更新
【发布时间】：2022-12-22 01:56:31
【问题描述】：

我目前正在将我们的音频播放器与 mediaSession 绑定在一起。一切正常，当我点击播放并更新 navigator.mediaSession.metadata 时，它会正确显示在桌面和移动设备的通知中。

但是在我重新加载页面并点击播放后，通知始终具有默认值（网站 URL 作为标题，link rel="icon" 作为艺术品）。这只会在我重新加载网站后发生。如果我关闭它并再次打开，通知将再次正常工作。

这是它是如何完成的：

//...
initialConfiguration: {
    title: 'Initial Title',
    artist: 'Initial Artist',
    album: '',
    artwork: [
        { src: "initial/artwork/url.jpg", sizes: "512x512", type: "image/jpg" },
    ]
},
currentMetadata: null,
setMediaSessionMetaData: function(){
    let self = this;
    if ('mediaSession' in navigator) {
        if( !self.currentMetadata ){
            self.currentMetadata = new MediaMetadata(self.initialConfiguration);
        }else{
            // Update existing metadata
            self.currentMetadata.title = "New Title";
            self.currentMetadata.artist = "New Artist";
            self.currentMetadata.artwork = [
                { src: "new/artwork/url.jpg", sizes: '512x512', type: "image/jpg" },
            ];
        }
        navigator.mediaSession.metadata = self.currentMetadata;
    }
},
//...

这个函数在第一页加载时工作得很好，当我第一次点击播放时，它加载了initialConfiguration，如果我再次调用该函数，标题和插图就会更新。但是重新加载后，通知总是默认值忽略我的配置。

mediaSession 中是否存在错误，我在 mediaSession github 页面 (https://github.com/w3c/mediasession/issues) 上没有发现任何关于此问题的信息，搜索此问题得到的结果为零。

【问题讨论】：

我似乎遇到了同样的问题。你有没有想过为什么它会重置为默认值？
我在使用 Chrome 和 Edge（在 Win10 上）时遇到了这个问题。现在我在最新的 Firefox 上试用了它，它运行起来非常棒。（另外，Spotify 网络播放器也有同样的问题，所以我不认为是我们做错了事。）我认为这是 Chromium 代码库中的一个错误。你怎么看？

标签： mediasession

【解决方案1】：

搜索了好几天都没有找到任何东西...... 我发现了一个解决方法。它与 performance.navigation.type 有关，当你第一次打开一个页面时它被设置为 0 并且在刷新后它被设置为 1。我很好奇这是否对 mediasession 有任何影响所以我想出了如何“通过模拟单击链接回源页面的隐藏超链接来“硬刷新”页面，因为显然这会生成“硬刷新”。之后mediasession 再次工作。所以我所做的是设置一个 onload 函数，检查是否 performance.navigation.type == 1 如果是，则执行“硬刷新”

window.onload = function() {
    
    if (performance.navigation.type != 0) {
    
    document. Write('<a id="HardRefresh" style="display: none;" href="' + window.location.href + '"></a>');
    document.getElementById("HardRefresh").click()
    
    }
};

现在用户刷新它会做一个“硬刷新”

【讨论】：