Navidrome: package navidrome WebUI as Progressive Web Application

[certuna]

I'm a healthy sceptic of web apps as the eternal Next Big Thing™, however I do think the navidrome WebUI is awesome, and should be packageable as a PWA with relatively little effort.

Advantages:

• allows your navidrome server to run as a 'native-looking' app on Android, Windows 10, macOS, ChromeOS and (with limitations) iOS.
• allows navidrome to implement new features (multi-value tags, more metadata fields) without resorting to breaking/extending the SubSonic API
• allows for offline caching, which could be used for sync-to-device or pre-loading

Disadvantages:

• https required, which at the moment would limit it to navidrome running behind a tls-capable proxy
• PWA's on iOS are crippled and the web is filled with developer rants how it is terrible. This is true, however iOS 14+ might see some more improvements, and PWA's on iOS being suboptimal doesn't invalidate the benefits for Android and Windows.

[deluan]

I thought about this before but didn't get too far because of the poor PWA support in iOS. If Apple adds proper support for PWA's in iOS, then I feel this is something worth doing. If not, I rather work (or contribute) on a cross-platform client, but then it would be only after Navidrome reaches 1.0

[certuna]

Writing fully functional native clients for Windows, Android and iOS is probably a hell of a lot more work than writing a PWA manifest and some service worker code, so this might be relatively "low hanging fruit"?

The situation with iOS is regrettable, and I can imagine your hesitation. But even without proper support, Android + Windows 10 + macOS is still a target audience big enough to consider I think.

There's good news though from the iOS WebKit front, which gives me hope iOS 14 will bring some improvement for background music playing.

[certuna]

Bummer: background audio still not working in iOS 14 final. At least it was acknowledged by Apple. Not just a simple webkit fix unfortunately:

the issues causing this behavior may be due to the underlying platform

[deluan]

Hey, do you think #518 was enough to close this? I mean, implementing ex: offline cache and making the UI an app on its own would be basically a new project.

[certuna]

I think so yes, this can be closed - with the correct manifest, the "publishing" of Navidrome as a PWA is done. I might put in an issue to implement offline caching of metadata and media in IndexedDB (this would basically bring full-on sync to the WebUI), but that's indeed another thing.

By the way, I've just done some more testing with pinning Navidrome as a PWA on iOS 14, now that I've set up a reverse proxy with https. Contrary to earlier tests, background audio does seem to work, I can queue up a full album, and the app happily moves on to the next track even with the app minimized and/or the screen turned off. For some reason the lock screen playback controls display [object Object] instead of the track name (and a Safari icon) but otherwise the experience is very good.

I might contribute some JS that tells the user he can pin Navidrome to the lock screen, like this, although I'm not the world's best JS coder. The code needs to check
a) we're on iOS
b) navidrome not already running standalone but in a Safari window
c) navidrome is on a https connection

[deluan]

For some reason the lock screen playback controls display [object Object] instead of the track name

I think this is caused by the way I set the track name for the media player... Can you open a new issue, with a screenshot, so I don't forget about this? Thanks a bunch!