Building a marine map PWA with Vite and Cloudflare Workers

[rkaponm]

I help build Proven Waters, an installable fishing web app with a Leaflet map and server routes for regional marine data. We use Vinext and the Cloudflare Vite plugin, with separate RSC and SSR environments. An installed app can hold an older shell across a deployment. When the app returns to the foreground, it checks the Vite manifest ETag for a build change. A Vite preload error can also trigger a rate-limited reload.

I’d be interested in how other Vite PWA projects handle stale assets in installed clients.

Try the Water Map

[krishkhinchi]

Hii @rkaponm,

This looks like an interesting implementation! I checked the Water Map, and the combination of Leaflet, marine data layers, and offline capabilities makes it a really useful PWA.

A few things I would consider for handling stale assets in Vite-based PWAs:

1. Service Worker Updates: I'd recommend using the service worker lifecycle to detect new deployments and notify users when an update is available, rather than always forcing an immediate reload.

2. Versioned Asset Caching: Keep hashed assets cached with long-lived immutable headers, while using a network-first strategy for the application shell and HTML responses to avoid serving outdated builds.

3. Preserving Application State: Before triggering a reload, make sure important user state is preserved, especially selected map coordinates, active layers, forecast timestamps, and saved locations.

4. Handling Chunk Loading Errors: Your Vite preload error recovery approach is useful. I'd also recommend implementing a reload guard to prevent infinite reload loops when a chunk or deployment issue persists.

5. Offline Experience: Since this application involves marine data, consider distinguishing between cached data and live data with clear timestamps. This helps users understand whether they are viewing fresh information or previously cached forecasts.

One additional question: Have you considered using a version-based update notification with BroadcastChannel to coordinate updates across multiple open tabs? It could help prevent different tabs from running different application versions simultaneously.

Overall, interesting use of Vite and Cloudflare Workers!

---

If this answer solve your all doubts so can you please mark my answer as solved

or if did not solved yet so please tell me your doubt