I am enjoying round with a PWA net app created in Vue and I’ve added this as a House Display screen bookmark to my iPhone operating iOS 16.
Once I play an audio file within the app, I create a Media Session occasion that appears like this:
if ("mediaSession" in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: this.currentSong.title,
artist: this.currentSong.artist,
album: this.currentSong.album,
paintings: [
{
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", (particulars) => {
this.emitter.emit("search", particulars.seekTime);
});
navigator.mediaSession.setActionHandler("play", () => {
this.togglePlay();
});
navigator.mediaSession.setActionHandler("pause", () => {
this.togglePlay();
});
}
Not one of the strategies utilized in that is related for my query, it has extra to do with how iOS handles the knowledge I present.
At any time when I create a brand new MediaMetadata and supplies title, artist and so forth. the supply or identify of the app disappears from the media participant widget on the Lock Display screen. Clicking the duvet artwork of the participant, I am redirected to what appears to be the primary finest PWA on my system that iOS can discover, nearly as if it simply takes a listing of all PWA apps put in and simply picks the primary. It might in fact be extra anticipated that iOS directs me to the PWA app that the audio is coming from.
If I do not present something by the Media Session API and remark out the code above, the media participant appears to at the least perceive the place the audio is coming from, because the title of the web site is written out and I can click on the duvet artwork and it redirects me to the right PWA, however clearly with none metadata since I have not supplied it.
I additionally seen that creating one motion handler, for instance navigator.mediaSession.setActionHandler("nexttrack", () => {...}), would reset all actions within the participant, so the play button would for instance be deactivated by offering only one motion handler. I used to be pondering if there’s something comparable with offering metadata, that every one default properties will get nulled or comparable?
I did not see this conduct on iOS 15 so I am simply curious if it is a bug with iOS 16 or if I’ve to offer any further properties with the MediaMetadata occasion?
