I describe that in the article, but here's the short of it:

iOS: You have to use Cordova plugins. I used RemoteCommand[0] and NowPlaying[1] that lets me write JavaScript that calls into native iOS functionality. Once the Cordova plugins are installed, you write JS to talk to them. Source code for that here[2].

Android: Google has submitted a web standard[3] for this. Integrating with it is simple[4].

Windows: Microsoft automatically injects the Windows API into the JS global namespace. So you write JavaScript that looks like window.Windows.Media.SystemMediaTransportControls.doSomethingHere(). You can see the code for that here[5].

[0]: https://github.com/leon/cordova-plugin-remotecommand

[1]: https://github.com/leon/cordova-plugin-nowplaying

[2]: https://github.com/JudahGabriel/Chavah/blob/master/Chavah.Ne...

[3]: https://developer.mozilla.org/en-US/docs/Web/API/Media_Sessi...

[4]: https://github.com/JudahGabriel/Chavah/blob/master/Chavah.Ne...

[5]: https://github.com/JudahGabriel/Chavah/blob/master/Chavah.Ne...

Thank you! That was very informative (sorry for only skimming the article earlier). So Android and Windows don't require a wrapper, but iOS needs Cordova. I'm sure iOS will catch up soon enough...

Me too I didn't suspect that was even possible. If it's not a hack maybe PWA are not that far from mainstream.

It's possible. But you currently have to write code for each platform; iOS uses a Cordova plugin for this, so your JS has to talk to Cordova. Windows uses its own proprietary namespace which is injected into your app, so you write JS that talks to the proprietary Windows API.

Google is the unique bright light here. They've submitted a web standard, navigator.mediaSession [0], that lets you do this in a web standard way. Unfortunatly, the only browser that implements it is Chrome on Android.

[0]: https://developer.mozilla.org/en-US/docs/Web/API/Media_Sessi...