Frontend PWA requires two reloads after redeploy

[spwoodcock]

Describe the bug

• The PWA caches routes.
• When redeployed, the old API calls are often cached and displayed.
• On refresh sometimes a blank page is shown.
• Yet another refresh finally shows the new deployed version of FMTM.

To Reproduce

• Go to FMTM dev.
• Redeploy.
• Refresh the page.

Expected behavior

• Caching is useful if users are in the field and have patchy internet.
• We need a way to keep caching, but invalidate the cache if FMTM is deployed.
• Is this possible?

Screenshots

Additional context

• Note I could be wrong here and it's actually the Nginx proxy that is caching, not the PWA.

[spwoodcock]

Possibly related #1289

[spwoodcock]

This is certainly due to the caching in the PWA:
https://stackoverflow.com/questions/57146097/service-worker-requires-double-refresh

Possible solutions:

• Replace the Vite PWA plugin with a custom service worker to handle this manually.
• Debug the issue with the plugin: https://github.com/vite-pwa/vite-plugin-pwa/issues?q=is%3Aissue+refresh

[spwoodcock]

@varun2948 @NSUWAL123 PWAs should work on either https secure context, or on localhost/127.0.01, so debugging locally should be possible 😄

Maybe it's a VitePWA thing in the config?

It's pretty easy to config a PWA without a plugin, we just need a manifest.json in the public directory.
Then we need to register a service worker.
Example code here: https://gitlab.com/mastweb/frontend/-/tree/main/src-pwa?ref_type=heads (the two .ts files)

[varun2948]

@spwoodcock i tried the pwa with vite-pwa plugin which kinda worked on the laptop version but in order to test it in mobile i might have to deploy right ?

[spwoodcock]

You should be able to debug the server on your laptop from your mobile via the local network.

You just need the IP address of your laptop to connect to: local_ip:port.

Or of you are in an office, probably best to connect your phone to your laptop via USB, then go to:
chrome://inspect/#devices
And you can debug webpages from your phone.

Another option is ngrok - weren't you guys using this before too?

[spwoodcock]

I will work on this to free up @NSUWAL123 to work on other tasks 👍