Progressive web application
This MR presents a POC for Funkwhale as a progressive web app. It makes use of the Vue CLI PWA plugin for generation of the service worker and manifest during the build procedure and the mediaSession
API for mapping keys to the player.
Mobile
Desktop
Benefits
- Better mobile performance
- Ability to use web-based player semi-natively on multiple devices
- Native support for notification keys
- Wider range of devices can be targeted
Drawbacks
- Introduces some new dependencies (none as big as electron, but still worth taking into consideration)
- Updates existing dependencies
- Requires some additional work to get set up
Still to do
This MR is by no means complete. A few things need to be addressed before the change is viable
- Dynamic population of manifest file with server details
- Implementation of the
beforeinstallPrompt
function - More selective caching
- Improvements to offline performance (relating to cache)
- Cleaning up of the
yarn.lock
file
Merge request reports
Activity
added AreaBackend AreaFrontend StatusInput wanted TypeEnhancement labels
added 16 commits
-
f072e521...3f274059 - 12 commits from branch
develop
- 1c9a823b - Set up initial configuration for installing
- ec8b8725 - Added new media controls
- 825db8d1 - Added comments
- daceb17e - Removed robots.txt
Toggle commit list-
f072e521...3f274059 - 12 commits from branch
added 7 commits
- 3483b9bf - Set up initial configuration for installing
- 5482f877 - Added new media controls
- e45bda73 - Added comments
- f072e521 - Removed robots.txt
- 08256e22 - Minor tweaks to sw conf (use non-CDN workbox)
- 125cc63e - Improved service worker configuration, added update notification
- d0b692e0 - Merge branch 'progressive-web-application' of...
Toggle commit list- Resolved by Agate
@Sporiff I've added a few commits, in particular to:
- Remove the CDN runtime call to https://googleapis
- Use a dedicated Service worker file (instead of the generated one) to ensure we can adapt it to our need (one use case was to remove the preloading of all the js/locale-* files, because it's unlikily to be needed in an offline context, and it's network intensive)
- Added a small notification to infonm users when an update is available (with the corresponding update button), cf video below
I've also tested it under various browser (firefox and chrome, on both mobile and desktop), because service workers can be really dangerous (we're basically caching stuff forever, so if we do it wrong, you may not have any way to correct our mistake afterwards :D). The support for media keys and pinning on home screen is really, really nice
❤ Based on my checks, the addditional dependency (workbox) is really small in production (less than 30kb uncompressed) so it's worth the UX improvements to have a better offline experience IMHO.
I'm going to push a last commit tomorrow to ensure the manifest is populated from server info when possible, but as far as I'm concerned, this is readdy to ship. You mentionned
Implementation of the beforeinstallPrompt function
in your todo list but I'm not sure what you mean by that?We can work on API-related cache in a separate MR, I think using the NetworkFirst strategy for API responses is the best way to have a decent offline experience without having stale data in the cache.
Thank you for working on this, this is going to be great! Peek_2020-01-07_17-12
enabled an automatic merge when the pipeline for 7522f765 succeeds
mentioned in commit ebf774d5