debugging PWA

index.html

@@ -76,17 +76,6 @@
       color: #666;
       font-size: 12px;
     }
-    #installButton {
-      display: none;
-      margin: 0 auto;
-      padding: 10px 20px;
-      font-size: 16px;
-      background-color: #4CAF50;
-      color: #fff;
-      border: none;
-      border-radius: 5px;
-      cursor: pointer;
-    }
     #install-instructions {
       display: none;
       text-align: center;
@@ -104,9 +93,6 @@
     <p>2. Tap <strong>Add to Home Screen</strong>.</p>
   </div>
   
-  <!-- Installation button (initially hidden) -->
-  <button id="installButton" onclick="installApp()">Install App</button>
-
   <form onsubmit="return convert(event)">
     <label for="euro">Enter amount in Euro:</label>
     <input type="number" id="euro" placeholder="Enter amount in Euro">
@@ -176,26 +162,15 @@
       });
     }
 
-    function installApp() {
-      if ('serviceWorker' in navigator) {
-        navigator.serviceWorker.register('/service-worker.js')
-          .then(registration => {
-            console.log('Service Worker registered with scope:', registration.scope);
-          })
-          .catch(error => {
-            console.error('Service Worker registration failed:', error);
-          });
-      }
-
-      // Hide the installation button once the app is installed
-      document.getElementById('installButton').style.display = 'none';
-    }
-
     // Show installation instructions only if accessed via browser
     if (!window.matchMedia('(display-mode: standalone)').matches) {
       document.getElementById('install-instructions').style.display = 'block';
-      document.getElementById('installButton').style.display = 'block';
     }
+
+    // Detect when the app is launched from the home screen and hide installation instructions
+    window.addEventListener('appinstalled', (event) => {
+      document.getElementById('install-instructions').style.display = 'none';
+    });
   </script>
 </body>
 </html>