updated pwa update plugin

frontend/plugins/pwaUpdate.client.ts

@@ -2,57 +2,63 @@ import { Workbox } from "workbox-window";
 
 export default defineNuxtPlugin(() => {
     const updateAvailable = ref(false);
+    let wb: Workbox | null = null;
 
-    let wb = null;
+    // Enhanced PWA detection
+    const isStandalone = window.matchMedia(
+        "(display-mode: standalone)"
+    ).matches;
+    const isIOSPWA = (window.navigator as any).standalone;
+    const isInstalledAsPWA = isStandalone || isIOSPWA;
 
-    if ("serviceWorker" in navigator) {
+    if ("serviceWorker" in navigator && isInstalledAsPWA) {
         wb = new Workbox("/sw.js");
 
-        // Detect when a new service worker is waiting
-        wb.addEventListener("waiting", () => {
-            updateAvailable.value = true;
-            showUpdateModal();
+        // Listen for version checks from SW
+        wb.addEventListener("message", (event) => {
+            if (event.data.type === "VERSION_CHECK") {
+                checkForUpdate(event.data.version);
+            }
         });
 
-        // Register the service worker
-        wb.register();
+        // Register service worker
+        wb.register().then((registration: any) => {
+            if (registration.waiting) {
+                checkForUpdate();
+            }
+        });
+
+        // Detect controller changes for updates
+        wb.addEventListener("controlling", () => {
+            window.location.reload();
+        });
     }
 
-    // Handle update confirmation
-    const handleUpdate = () => {
-        if (updateAvailable) {
-            // Send message to service worker to skip waiting
-            wb?.messageSW({ type: "SKIP_WAITING" });
+    const checkForUpdate = (newVersion?: string) => {
+        const currentVersion = localStorage.getItem("pwa_version");
 
-            // Wait for controller change and reload
-            navigator.serviceWorker.addEventListener("controllerchange", () => {
-                window.location.reload();
-            });
+        if (!newVersion) {
+            // If no version provided, just trigger update
+            updateAvailable.value = true;
+            return;
+        }
+
+        if (currentVersion !== newVersion) {
+            updateAvailable.value = true;
+            localStorage.setItem("pwa_version", newVersion);
         }
     };
 
-    const handleUpdateAvailable = (state: boolean) => {
-        updateAvailable.value = state;
+    const handleUpdate = () => {
+        if (!!wb) {
+            wb.messageSW({ type: "SKIP_WAITING" });
+        }
     };
 
     return {
         provide: {
             updateAvailable,
             handleUpdate,
-            handleUpdateAvailable,
         },
     };
 });
-
-function showUpdateModal() {
-    // Create and show your modal UI here
-    const modal = document.createElement("div");
-    modal.innerHTML = `
-    <div class="update-modal">
-      <h2>New Version Available! 🎉</h2>
-      <p>A new version of the app is available. Please update to get the latest features.</p>
-      <button onclick="handleUpdate()">Update Now</button>
-    </div>
-  `;
-    document.body.appendChild(modal);
-}