feat(frontend): Add version-based cache invalidation for PWA updates

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.com>

frontend/src/hooks/usePWA.ts

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 interface PWAUpdate {
   updateAvailable: boolean;
   updateSW: () => Promise<void>;
+  forceReload: () => Promise<void>;
 }
 
 export function usePWA(): PWAUpdate {
@@ -11,6 +12,33 @@ export function usePWA(): PWAUpdate {
     () => async () => {},
   );
 
+  const forceReload = async (): Promise<void> => {
+    try {
+      // Clear all caches
+      if ('caches' in window) {
+        const cacheNames = await caches.keys();
+        await Promise.all(
+          cacheNames.map(cacheName => caches.delete(cacheName))
+        );
+        console.log("All caches cleared");
+      }
+      
+      // Unregister service worker
+      if ('serviceWorker' in navigator) {
+        const registrations = await navigator.serviceWorker.getRegistrations();
+        await Promise.all(registrations.map(registration => registration.unregister()));
+        console.log("All service workers unregistered");
+      }
+      
+      // Force reload
+      window.location.reload();
+    } catch (error) {
+      console.error("Error during force reload:", error);
+      // Fallback: just reload the page
+      window.location.reload();
+    }
+  };
+
   useEffect(() => {
     // Check if SW registration is available
     if ("serviceWorker" in navigator) {
@@ -37,5 +65,6 @@ export function usePWA(): PWAUpdate {
   return {
     updateAvailable,
     updateSW,
+    forceReload,
   };
 }

frontend/src/hooks/useVersionCheck.ts

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "../lib/api";
+
+const VERSION_STORAGE_KEY = "leggen_app_version";
+
+export function useVersionCheck(forceReload: () => Promise<void>) {
+  const {
+    data: healthStatus,
+    isSuccess: healthSuccess,
+  } = useQuery({
+    queryKey: ["health"],
+    queryFn: apiClient.getHealth,
+    refetchInterval: 30000,
+    retry: false,
+    staleTime: 0, // Always consider data stale to ensure fresh version checks
+  });
+
+  useEffect(() => {
+    if (healthSuccess && healthStatus?.version) {
+      const currentVersion = healthStatus.version;
+      const storedVersion = localStorage.getItem(VERSION_STORAGE_KEY);
+      
+      if (storedVersion && storedVersion !== currentVersion) {
+        console.log(`Version mismatch detected: stored=${storedVersion}, current=${currentVersion}`);
+        console.log("Clearing cache and reloading...");
+        
+        // Update stored version first
+        localStorage.setItem(VERSION_STORAGE_KEY, currentVersion);
+        
+        // Force reload to clear cache
+        forceReload();
+      } else if (!storedVersion) {
+        // First time loading, store the version
+        localStorage.setItem(VERSION_STORAGE_KEY, currentVersion);
+        console.log(`Version stored: ${currentVersion}`);
+      }
+    }
+  }, [healthSuccess, healthStatus?.version, forceReload]);
+}

frontend/src/routes/__root.tsx

@@ -3,10 +3,14 @@ import { AppSidebar } from "../components/AppSidebar";
 import { SiteHeader } from "../components/SiteHeader";
 import { PWAInstallPrompt, PWAUpdatePrompt } from "../components/PWAPrompts";
 import { usePWA } from "../hooks/usePWA";
+import { useVersionCheck } from "../hooks/useVersionCheck";
 import { SidebarInset, SidebarProvider } from "../components/ui/sidebar";
 
 function RootLayout() {
-  const { updateAvailable, updateSW } = usePWA();
+  const { updateAvailable, updateSW, forceReload } = usePWA();
+  
+  // Check for version mismatches and force reload if needed
+  useVersionCheck(forceReload);
 
   const handlePWAInstall = () => {
     console.log("PWA installed successfully");