Add install button for PWA using deferredPrompt (#5406)

* Expose PWA install flow using deferredPrompt

* Fix install button icon

Author: Kunal241207

index.html

@@ -391,6 +391,12 @@
                                     <i class="material-icons md-48">help</i>
                                 </a>
                             </li>
+                            <li>
+                                <a id="installButton" class="tooltipped hidden" data-position="bottom"
+                                    data-tooltip="Install App" aria-label="Install App">
+                                    <i class="material-icons md-48">file_download</i>
+                                </a>
+                            </li>
                         </ul>
                     </div>
                     <div class="nav-wrapper" id="aux-toolbar" style="display: none;" tabindex="-1">
@@ -568,8 +574,10 @@
             // Detect if running on localhost for development
             const isLocalDev = window.location.hostname === "localhost" ||
                 window.location.hostname === "127.0.0.1";
+            // Localhost SW is disabled to avoid caching; set allowLocalPwa to test installs.
+            const allowLocalPwa = localStorage.getItem("allowLocalPwa") === "true";
 
-            if (!isLocalDev) {
+            if (!isLocalDev || allowLocalPwa) {
                 // Production: Register service worker for offline mode
                 if (navigator.serviceWorker.controller) {
                     console.debug(
@@ -594,6 +602,9 @@
                 console.log(
                     "🔥 [DEV MODE] Service worker disabled on localhost for instant code updates"
                 );
+                console.log(
+                    "Set localStorage.allowLocalPwa = 'true' to enable PWA install testing on localhost."
+                );
             }
         }
     </script>
@@ -604,10 +615,33 @@
             event.preventDefault(); // Prevent automatic browser prompt
             deferredPrompt = event;
 
-            // Show your install button here
-            const divInstall = document.getElementById("installButton");
-            if (divInstall) {
-                divInstall.classList.remove("hidden");
+            // Show the install button
+            const installButton = document.getElementById("installButton");
+            if (installButton) {
+                installButton.classList.remove("hidden");
+            }
+        });
+
+        // Handle install button click
+        document.addEventListener("DOMContentLoaded", function () {
+            const installButton = document.getElementById("installButton");
+            if (installButton) {
+                installButton.addEventListener("click", async function () {
+                    if (deferredPrompt) {
+                        // Show the install prompt
+                        deferredPrompt.prompt();
+                        
+                        // Wait for user choice
+                        const { outcome } = await deferredPrompt.userChoice;
+                        console.log(`User response to the install prompt: ${outcome}`);
+                        
+                        // Clear the deferredPrompt
+                        deferredPrompt = null;
+                        
+                        // Hide the button
+                        installButton.classList.add("hidden");
+                    }
+                });
             }
         });
     </script>
@@ -803,6 +837,12 @@
         document.addEventListener('MSFullscreenChange', handleFullscreenChange);
     </script>
 
+    <style>
+        #installButton.hidden {
+            display: none !important;
+        }
+    </style>
+
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             let persistentNotification = null;