diff --git a/frontend/plugins/pwaUpdate.client.ts b/frontend/plugins/pwaUpdate.client.ts index dea2ba8..0fe75c1 100644 --- a/frontend/plugins/pwaUpdate.client.ts +++ b/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 = ` -
-

New Version Available! 🎉

-

A new version of the app is available. Please update to get the latest features.

- -
- `; - document.body.appendChild(modal); -}