Add basic PWA support

[alistair3149]

Changes

Should be enough to fulfill the installability requirements (#181):

• Add webapp manfiest
• Add basic service worker
  • Does nothing currently, but it is enough to fulfill the installability requirements
• Add square icons per PWA requirements (192px, 512px, SVG)
  • Icons are based on this vector icon
  • PNGs are optimized with PNGCrush
  • SVG is optimized with SVGO
  • Add maskable icons for fancier app icons

Tests

• [x] This PR does not require tests

Changelog

• [x] Entry has been added to changelog

Documentation

• [x] This change does not need a documentation update

Dark mode

• [x] This PR does not change the UI

Notes

There are still some potential PWA improvements can be added in the future, but sadly I don't know enough about Plausible or Elixir to add those myself. Maybe someone can take a look:

• ServiceWorker can be used to cache static resources and offer offline view
• Shortcuts can provide quick links to useful pages or views
• Protocol handlers might be interesting to look into

On an unrelated note, I realized that the original SVG icon has some dirty pathing where the "P" icon does not line up with the circle. Not sure if it is intended so I left that there. The PNG icons in the static folder can be further reduced in file sizes as well to save some bandwidth.

This is my first time committing a PR here, please let me know if there is anything you need!

[ukutaht]

Thanks @alistair3149 !

Did you see this open PR? https://github.com/plausible/analytics/pull/1981

How would you say your PR compares to the older one?

[alistair3149]

The older PR is incomplete and this PR covers everything in the previous PR.

• In the older PR, the service worker is loaded directly from the HEAD element without compatibility check. It can throw error on browsers that don't support service worker.
• In the older PR, the service worker script can only access the /js/ subdirectory. That means it cannot cache most assets, which makes it not ideal. This PR places the service worker in domain root instead, allowing it to access all assets for caching.
• In the older PR, there is only one icon defined in the manifest, and it is a rectangle icon (150px x 200px). Some devices require square icon and specific dimensions to function. This PR uses square icons with dimensions recommended for Chromium, vector icon, and also maskable icons to cover most use cases.
• The older PR is missing some property in the manifest. You can compare the two here: Old vs New
• The older PR uses manifest.json as the file name, which is an older standard. The current best practice is to use .webmanifest
• The older PR has a shortcut to the /create page. I didn't add any shortcut in this PR because I'm not sure about the idea of adding pages that has access restrictions (e.g. /register might be disabled on some sites)

[ukutaht]

Cheers thanks. I'll close the old one and keep this one as the one to consider.

[alistair3149]

Is there anything I can help to move this forward?

[ukutaht]

@alistair3149

Each PR needs to be reviewed, tested by the core team, and integrated properly. This is not currently high on our list of priorities. For features/PRs that haven't been agreed on with the core team in advance, we can't guarantee any response times.

We do want to get the list of PRs down so I might put this on our backlog sometime soon. But no promises, sorry! I really do appreciate the effort put in by all external contributors, but I hope you understand that it's the core team's responsibility to uphold quality standards. Integrating PRs takes time and effort from our side (not just on the contributor's side) and needs to be considered within the context of all our other priorities.

[alistair3149]

No problem and appreciate the reply! I just want to make sure that all work has been done and it is ready for handoff. Hope to see it integrated soon!

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}