Update PWA config with 2023 icon requirements and caching

[spwoodcock]

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation
• 🧑‍💻 Refactor
• ✅ Test
• 🤖 Build or CI
• ❓ Other (please specify)

Related Issue

Should address #1313 and also #611

Describe this PR

Code:

• Kept vite-plugin-pwa as it's pretty good.
• Updated the config so it works in production and development.
• Added minimal icon requirements for PWA 2023.
• Did a bit of refactoring on the frontend, adding a main.tsx file for code ran at first load.

User experience:

• This should hopefully stop the issue where the PWA required two reloads after being updated.
• The PWA should seamless update in the background when a new version is available.
• Caching should also be enabled by default, allowing for usage in offline environments.
• There is a popup to inform the user when all content is cached and available offline.

Alternative Approaches Considered

• Writing the manifest and service workers manually, but I couldn't really see any advantage.
• If the white screen / reload issue isn't solved, then we can go this route.

Review Guide

• Test reloading the PWA on dev. There should be no white screen.
• Test loading FMTM, then disabling internet. Some functionality should hopefully remain available.

Checklist before requesting a review

• 📖 Read the FMTM Contributing Guide: https://github.com/hotosm/fmtm/blob/main/CONTRIBUTING.md
• 📖 Read the HOT Code of Conduct: https://docs.hotosm.org/code-of-conduct
• 👷‍♀️ Create small PRs. In most cases, this will be possible.
• ✅ Provide tests for your changes.
• 📝 Use descriptive commit messages.
• 📗 Update any related documentation and include any relevant screenshots.

[optional] What gif best describes this PR or how it makes you feel?

[spwoodcock]

@NSUWAL123 @varun2948 I have updated the PWA, but for some reason the map container CSS is not longer expanding the map to the full available vertical height.

I added to the index.html:

    <meta
      name="viewport"
      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"
    />

Not sure if it's related.

I can't work out where the tailwind classes are defined on a brief inspection - could you take take a look please?
It seems to be on the id="ol-map" component where the CSS is no longer working.

[varun2948]

will have a look into this tomorrow morning let's see where it goes

[spwoodcock]

@NSUWAL123 @varun2948 could this be prioritised for Monday so we can include in the next release? 🙏

[NSUWAL123]

@spwoodcock, I will have a look at this issue today

[NSUWAL123]

@spwoodcock, I have fixed the map height problem in #1528. Is the issue only with the map?