I'm playing around with a PWA web app created in Vue and I've added this as a Home Screen bookmark to my iPhone running iOS 16.
When I play an audio file in the app, I create a Media Session instance that looks like this:
if ("mediaSession" in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: this.currentSong.title,
artist: this.currentSong.artist,
album: this.currentSong.album,
artwork: [
{
src: "https://dummyimage.com/96x96",
sizes: "96x96",
type: "image/png",
},
...
],
});
navigator.mediaSession.setActionHandler("nexttrack", () => {
this.nextSong();
});
navigator.mediaSession.setActionHandler("previoustrack", () => {
this.prevSong();
});
navigator.mediaSession.setActionHandler("seekto", (details) => {
this.emitter.emit("seek", details.seekTime);
});
navigator.mediaSession.setActionHandler("play", () => {
this.togglePlay();
});
navigator.mediaSession.setActionHandler("pause", () => {
this.togglePlay();
});
}
None of the methods used in this is relevant for my question, it has more to do with how iOS handles the information I provide.
Whenever I create a new MediaMetadata and provides title, artist etc. the source or name of the app disappears from the media player widget on the Lock Screen. Clicking the cover art of the player, I'm redirected to what seems to be the first best PWA on my device that iOS can find, almost as if it just takes a list of all PWA apps installed and just picks the first. It would of course be more expected that iOS directs me to the PWA app that the audio is coming from.
If I don't provide anything through the Media Session API and comment out the code above, the media player seems to at least understand where the audio is coming from, since the title of the website is written out and I can click the cover art and it redirects me to the correct PWA, but obviously without any metadata since I haven't provided it.
I also noticed that creating one action handler, for example navigator.mediaSession.setActionHandler("nexttrack", () => {...}), would reset all actions in the player, so the play button would for example be deactivated by providing just one action handler. I was thinking if there is something similar with providing metadata, that all default properties gets nulled or similar?
I didn't see this behavior on iOS 15 so I'm just curious if this is a bug with iOS 16 or if I have to provide any extra properties with the MediaMetadata instance?
