public/js/pwa-install.js

@@ -1,5 +1,8 @@
 let deferredPrompt;
 
+/* -----------------------------
+   ANDROID / CHROME INSTALL FLOW
+------------------------------*/
 window.addEventListener("beforeinstallprompt", (e) => {
     e.preventDefault();
     deferredPrompt = e;
@@ -7,6 +10,55 @@ window.addEventListener("beforeinstallprompt", (e) => {
     // Prevent duplicate banner
     if (document.getElementById("install-banner")) return;
 
+    showInstallBanner({
+        message: '📱 Install <b>Quality</b> App?',
+        buttonText: 'Install',
+        onClick: async () => {
+            deferredPrompt.prompt();
+            const { outcome } = await deferredPrompt.userChoice;
+            console.log("User install choice:", outcome);
+            deferredPrompt = null;
+        }
+    });
+});
+
+/* -----------------------------
+   IOS SAFARI MANUAL INSTALL
+------------------------------*/
+function isIosSafari() {
+    return (
+        /iP(ad|hone|od)/.test(navigator.userAgent) &&
+        /Safari/.test(navigator.userAgent) &&
+        !/CriOS|FxiOS|OPiOS/.test(navigator.userAgent)
+    );
+}
+
+function isInStandaloneMode() {
+    return window.navigator.standalone === true;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    if (
+        isIosSafari() &&
+        !isInStandaloneMode() &&
+        !localStorage.getItem("iosInstallShown")
+    ) {
+        showInstallBanner({
+            message: '📱 Install <b>Quality</b> App<br><small>Tap Share ⬆️ → Add to Home Screen</small>',
+            buttonText: 'Got it',
+            onClick: () => {
+                localStorage.setItem("iosInstallShown", "1");
+            }
+        });
+    }
+});
+
+/* -----------------------------
+   COMMON INSTALL BANNER UI
+------------------------------*/
+function showInstallBanner({ message, buttonText, onClick }) {
+    if (document.getElementById("install-banner")) return;
+
     const banner = document.createElement("div");
     banner.id = "install-banner";
     banner.innerHTML = `
@@ -24,7 +76,7 @@ window.addEventListener("beforeinstallprompt", (e) => {
             box-shadow: 0 4px 10px rgba(0,0,0,0.3);
             z-index: 99999;
         ">
-            <span style="font-size: 16px;">📱 Install <b>Quality</b> App?</span><br>
+            <span style="font-size: 16px;">${message}</span><br>
             <button id="installBtn" style="
                 margin-top: 10px;
                 background: white;
@@ -34,22 +86,22 @@ window.addEventListener("beforeinstallprompt", (e) => {
                 border-radius: 6px;
                 font-weight: 600;
                 cursor: pointer;
-            ">Install</button>
+            ">${buttonText}</button>
         </div>
     `;
     document.body.appendChild(banner);
 
-    document.getElementById("installBtn").addEventListener("click", async () => {
+    document.getElementById("installBtn").addEventListener("click", () => {
         banner.remove();
-        deferredPrompt.prompt();
-        const { outcome } = await deferredPrompt.userChoice;
-        console.log("User install choice:", outcome);
-        deferredPrompt = null;
+        onClick();
     });
-});
+}
 
+/* -----------------------------
+   APP INSTALLED EVENT
+------------------------------*/
 window.addEventListener("appinstalled", () => {
-    console.log("🎉 PDS installed successfully!");
+    console.log("🎉 App installed successfully!");
     const banner = document.getElementById("install-banner");
     if (banner) banner.remove();
 });