hotosm
Frontend PWA requires two reloads after redeploy
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.
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
@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)
@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 ?
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?
