Add basic PWA support (#38)

[samwisekind]

This PR addresses #38 by adding basic PWA support to the website.

Untitled.mov

Notes:

• Tried using vite-plugin-pwa but couldn't seem to get it to work properly (i.e. was not generating the manifest)
• Manifest members scope and start_url are currently set to /gpx.studio/app to limit the PWA to only the new version of the app - this also means that Help and external links such as Donate open in a separate window
• Used the colour #030816 from the website background for the background and theme colours, as well as the background colour in the icon images (can easily be changed)

Known issues:

• PWA is not currently installable via Chrome, Edge etc. as it lacks service workers (might be a good next step?)

[vcoppe]

Thank you for working on this!
I will replace the current website with the new one in the coming days, so I won't take any action on this until then (the URL will change).

Here are a few comments already:

• the website actually has a light and a dark theme. Apparently, it's currently not possible to specify multiple color schemes in the manifest (see Add support for defining a theme color for both light & dark modes (prefers color scheme) w3c/manifest#975). Can we simply avoid setting a value to use the system defaults?
• the website is localized in multiple languages (for example https://gpx.studio/gpx.studio/fr/app). What is the best way to make the PWA start on the right URL? I read here that we could create one manifest for each language (this could be done dynamically at build time).
• can you provide a reference so that I can understand why it doesn't work for Chrome/Edge/etc. and what else it requires? Thanks!

[samwisekind]

Thank you for working on this!

I will replace the current website with the new one in the coming days, so I won't take any action on this until then (the URL will change).

Here are a few comments already:

• the website actually has a light and a dark theme. Apparently, it's currently not possible to specify multiple color schemes in the manifest (see Add support for defining a theme color for both light & dark modes (prefers color scheme) w3c/manifest#975). Can we simply avoid setting a value to use the system defaults?

• the website is localized in multiple languages (for example https://gpx.studio/gpx.studio/fr/app). What is the best way to make the PWA start on the right URL? I read here that we could create one manifest for each language (this could be done dynamically at build time).

• can you provide a reference so that I can understand why it doesn't work for Chrome/Edge/etc. and what else it requires? Thanks!

Thanks for the feedback! :) I'll get back to you in a day or two!

[Luen]

@vcoppe Fireship has a quick video on it. See also their repo (with links to the YouTube videos) - https://github.com/fireship-io/7-pwa-features-demo
Basically, you just need to register a service worker to make it installable on Chromium-based browsers and create a manifest.json
For the languages, you can define a start_url - possibly having a language selector screen on first load.