navigator.mediaSession.metadata not updating after page reload

Question

I am currently tying our audio player with mediaSession. Everything is working as it should, when I hit play and update navigator.mediaSession.metadata, it's properly displayed in the notification on desktop and mobile.

But after I reload the page and hit play, the notification has always default values (website URL as a title and link rel="icon" for the artwork). This only happens after I reload the website. If I close it and open again the notification is working properly again.

Here's how it's done:

//...
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;
    }
},
//...

This function works perfectly fine on first page load, when I hit play for the first time it loads the initialConfiguration and if I call the function again the title and artwork gets updated. But after reload, the notification has always default values ignoring my configuration.

Is there a bug in mediaSession, I didn't find anything regarding this issue on mediaSession github page (https://github.com/w3c/mediasession/issues) and searching this issue gives me zero results.

Answer 1

After Searching for days and not finding anything.... I discovered a workaround. It has to do with the performance.navigation.type when you first open a page it is set to 0 and after a refresh it gets set to 1. I was curious if this had any effect on the mediasession so I figured out how to "Hard Refresh" the page by using window.open(window.location.href, "_self");, because apparently that generates a "Hard Refresh". After that the mediasession works again. so what I did was setup an onload function that checks to see if performance.navigation.type == 1 and if so then do a "Hard Refresh"

    window.onload = function() {
    
        if (performance.navigation.type != 0) {
    
            window.open(window.location.href, "_self");
    
        }
    };

Now when the user refresh's it will do a "Hard Refresh". Also make sure to move the window. Onload line to the end of the javascript file or after the initial function