Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop

frontend/app.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-
 // import
 
 import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
 
 // state
 
-const {
-    $updateAvailable: updateAvailable,
-    $handleUpdate: handleUpdate,
-    $handleUpdateAvailable: handleUpdateAvailable,
-} = useNuxtApp();
+const { $updateAvailable: updateAvailable, $handleUpdate: handleUpdate } =
+    useNuxtApp();
+
+const closeModal = () => {
+    updateAvailable.value = false;
+};
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const {
         <UpdatePwaModal
             :isShow="updateAvailable"
             @update="handleUpdate"
-            @close="handleUpdateAvailable"
+            @close="closeModal"
         />
 
         <NuxtLayout>

frontend/components/global/UpdatePwaModal.vue

@@ -36,15 +36,13 @@ const visible = computed({
         @close="visible = false"
     >
         <template #content>
-            <div class="w-full flex flex-col text-start gap-6 py-5" dir="rtl">
-                <p class="leading-[0.75rem]">
+            <div class="w-full flex flex-col text-start gap-3 py-5" dir="rtl">
+                <p>
                     نسخه جدید و بهبود یافته اپلیکیشن با ویژگی‌های جذاب منتظر
                     شماست
                 </p>
-                <p class="leading-[0.75rem]">
-                    برای تجربه بهتر، لطفا نسخه فعلی را بروزرسانی کنید
-                </p>
-                <p class="leading-[0.75rem]">
+                <p>برای تجربه بهتر، لطفا نسخه فعلی را بروزرسانی کنید</p>
+                <p>
                     پس از کلیک بر روی گزینه دریافت نسخه جدید، برنامه به صورت
                     خودکار بروز می‌شود
                 </p>

frontend/nuxt.config.ts

@@ -99,6 +99,8 @@ export default defineNuxtConfig({
         },
         workbox: {
             navigateFallback: "/",
+            clientsClaim: true,
+            skipWaiting: true,
         },
         devOptions: { enabled: true, type: "module" },
     },

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);
-}

frontend/public/sw.js

@@ -3,18 +3,41 @@ import { precacheAndRoute } from "workbox-precaching";
 // Precaching configuration for PWA assets
 precacheAndRoute(self.__WB_MANIFEST);
 
-const VERSION = "1.0.0";
+// Version
+
+const VERSION = "1.0.423";
 
 // Service Worker Installation
 self.addEventListener("install", (event) => {
-    self.skipWaiting(); // Force activate new SW immediately
-    console.log("Service Worker installed");
+    self.skipWaiting();
+    // Clear old cache during install
+    event.waitUntil(
+        caches.keys().then((cacheNames) => {
+            return Promise.all(
+                cacheNames.map((cache) => {
+                    if (cache !== self.registration.scope + "::" + VERSION) {
+                        return caches.delete(cache);
+                    }
+                })
+            );
+        })
+    );
 });
 
 // Service Worker Activation
 self.addEventListener("activate", (event) => {
-    event.waitUntil(self.clients.claim());
-    console.log("Service Worker activated");
+    event.waitUntil(
+        (async () => {
+            const clients = await self.clients.matchAll({ type: "window" });
+            clients.forEach((client) => {
+                client.postMessage({
+                    type: "VERSION_CHECK",
+                    version: VERSION,
+                });
+            });
+            self.clients.claim();
+        })()
+    );
 });
 
 // Push Notification Handler for Django Web Push
@@ -48,6 +71,5 @@ self.addEventListener("notificationclick", (event) => {
 self.addEventListener("message", (event) => {
     if (event.data === "SKIP_WAITING") {
         self.skipWaiting();
-        self.clients.claim();
     }
 });