Frontend PWA requires two reloads after redeploy

hotosm / fmtm

Field Mapping Tasking Manager - coordinated field mapping.

https://fmtm.hotosm.org/

GNU Affero General Public License v3.0

42 stars 44 forks source link

Frontend PWA requires two reloads after redeploy #1313

Open spwoodcock opened 5 months ago

spwoodcock commented 5 months ago

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 commented 5 months ago

Possibly related #1289

spwoodcock commented 5 months ago

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 commented 4 months ago

@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 commented 4 months ago

@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 commented 4 months ago

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 commented 4 months ago

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

manjitapandey commented 2 months ago

I can still replicate the issue. So opening the issue again.