debugging PWA

index.html

@@ -131,49 +131,19 @@
   </footer>
 
   <script>
-    let recentCalculations = [];
+    let deferredPrompt;
   
-    function convert(event) {
+    window.addEventListener('beforeinstallprompt', (event) => {
+      // Prevent the default installation prompt
       event.preventDefault();
-      const euro = document.getElementById("euro").value;
-      const dinar = document.getElementById("dinar").value;
-      const apiKey = "ab0076697b3401ea71d2c393";
-      const url = `https://v6.exchangerate-api.com/v6/${apiKey}/pair/EUR/DZD`;
-
-      fetch(url)
-        .then(response => response.json())
-        .then(data => {
-          const exchangeRate = data.conversion_rate;
-          if (euro) {
-            const result = (euro * exchangeRate).toFixed(2);
-            const calculation = `${euro} Euro = ${result} Algerian Dinar`;
-            document.getElementById("result").textContent = calculation;
-            recentCalculations.unshift(calculation);
-          } else if (dinar) {
-            const result = (dinar / exchangeRate).toFixed(2);
-            const calculation = `${dinar} Algerian Dinar = ${result} Euro`;
-            document.getElementById("result").textContent = calculation;
-            recentCalculations.unshift(calculation);
-          }
-          recentCalculations = recentCalculations.slice(0, 5);
-          updateRecentCalculations();
-        })
-        .catch(error => {
-          console.log(error);
-          document.getElementById("result").textContent = "Oops, something went wrong! Please try again later.";
-        });
-    }
-
-    function updateRecentCalculations() {
-      const calculationList = document.getElementById("calculationList");
-      calculationList.innerHTML = "";
-
-      recentCalculations.forEach(calculation => {
-        const li = document.createElement("li");
-        li.textContent = calculation;
-        calculationList.appendChild(li);
-      });
-    }
+      // Stash the event so it can be triggered later
+      deferredPrompt = event;
+      // Show installation instructions only if app is not already installed
+      if (!window.matchMedia('(display-mode: standalone)').matches) {
+        document.getElementById('install-instructions').style.display = 'block';
+        document.getElementById('installButton').style.display = 'block';
+      }
+    });
   
     function installApp() {
       if ('serviceWorker' in navigator) {
@@ -191,7 +161,25 @@
         document.getElementById('install-instructions').style.display = 'block';
         document.getElementById('installButton').style.display = 'block';
       }
+  
+      // Listen for the app installed event
+      window.addEventListener('appinstalled', () => {
+        // Hide the installation button once the app is installed
+        document.getElementById('installButton').style.display = 'none';
+      });
+  
+      // Prompt the user to install the PWA
+      if (deferredPrompt) {
+        deferredPrompt.prompt();
+        deferredPrompt.userChoice.then((choiceResult) => {
+          if (choiceResult.outcome === 'accepted') {
+            console.log('User accepted the A2HS prompt');
+          }
+          deferredPrompt = null;
+        });
+      }
     }
   </script>
+  
 </body>
 </html>