From 3d763335f64b941fb340643f8a9f31b6017fdacd Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 6 Mar 2025 18:03:05 +0330
Subject: [PATCH] added update pwa plugin

---
 frontend/plugins/pwaUpdate.client.ts | 58 ++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 frontend/plugins/pwaUpdate.client.ts

diff --git a/frontend/plugins/pwaUpdate.client.ts b/frontend/plugins/pwaUpdate.client.ts
new file mode 100644
index 0000000..dea2ba8
--- /dev/null
+++ b/frontend/plugins/pwaUpdate.client.ts
@@ -0,0 +1,58 @@
+import { Workbox } from "workbox-window";
+
+export default defineNuxtPlugin(() => {
+    const updateAvailable = ref(false);
+
+    let wb = null;
+
+    if ("serviceWorker" in navigator) {
+        wb = new Workbox("/sw.js");
+
+        // Detect when a new service worker is waiting
+        wb.addEventListener("waiting", () => {
+            updateAvailable.value = true;
+            showUpdateModal();
+        });
+
+        // Register the service worker
+        wb.register();
+    }
+
+    // Handle update confirmation
+    const handleUpdate = () => {
+        if (updateAvailable) {
+            // Send message to service worker to skip waiting
+            wb?.messageSW({ type: "SKIP_WAITING" });
+
+            // Wait for controller change and reload
+            navigator.serviceWorker.addEventListener("controllerchange", () => {
+                window.location.reload();
+            });
+        }
+    };
+
+    const handleUpdateAvailable = (state: boolean) => {
+        updateAvailable.value = state;
+    };
+
+    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);
+}