From c4629d777a529650ac9b93c4fbd8350ef0d0b4ff Mon Sep 17 00:00:00 2001
From: Tobi <hello@kabi.tk>
Date: Tue, 9 Apr 2024 10:02:43 +0200
Subject: [PATCH] debugging PWA functionality

---
 index.html | 57 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 50 insertions(+), 7 deletions(-)
diff --git a/index.html b/index.html
index f7572a2..61b8e4a 100644
--- a/index.html
+++ b/index.html
@@ -77,13 +77,34 @@
       font-size: 12px;
     }
   </style>
+  <style>
+    #installButton {
+      display: block;
+      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;
+      padding: 20px;
+    }
+  </style>
 </head>
 <body>
-  <div style="text-align: center; padding: 20px;">
+  <div id="install-instructions" style="text-align: center; padding: 20px;">
     <p>For the best experience, add this web app to your home screen:</p>
     <p>1. Tap the <strong>Share</strong> button.</p>
     <p>2. Tap <strong>Add to Home Screen</strong>.</p>
   </div>
+  <button onclick="installApp()">Install App</button>
+
   <h1>Exchange Rate Calculator</h1>
   <form>
     <label>Enter amount in Euro:</label>
@@ -105,7 +126,6 @@
   </footer>
 
   <script>
-    // Array to store recent calculations
     let recentCalculations = [];
 
     function convert(event) {
@@ -123,16 +143,13 @@
             const result = (euro * exchangeRate).toFixed(2);
             const calculation = `${euro} Euro = ${result} Algerian Dinar`;
             document.getElementById("result").innerHTML = calculation;
-            // Add to recent calculations array
             recentCalculations.unshift(calculation);
           } else if (dinar) {
             const result = (dinar / exchangeRate).toFixed(2);
             const calculation = `${dinar} Algerian Dinar = ${result} Euro`;
             document.getElementById("result").innerHTML = calculation;
-            // Add to recent calculations array
             recentCalculations.unshift(calculation);
           }
-          // Limit recent calculations to last 5 entries
           recentCalculations = recentCalculations.slice(0, 5);
           updateRecentCalculations();
         })
@@ -144,7 +161,7 @@
 
     function updateRecentCalculations() {
       const calculationList = document.getElementById("calculationList");
-      calculationList.innerHTML = ""; // Clear previous list
+      calculationList.innerHTML = "";
 
       recentCalculations.forEach(calculation => {
         const li = document.createElement("li");
@@ -163,6 +180,32 @@
           console.error('Service Worker registration failed:', error);
         });
     }
-  </script>  
+  </script>
+<script>
+  let deferredPrompt;
+
+  window.addEventListener('beforeinstallprompt', (event) => {
+    event.preventDefault();
+    deferredPrompt = event;
+    if (!window.matchMedia('(display-mode: standalone)').matches) {
+      document.getElementById('install-instructions').style.display = 'block';
+    }
+  });
+
+  function installApp() {
+    if (deferredPrompt) {
+      deferredPrompt.prompt();
+      deferredPrompt.userChoice.then((choiceResult) => {
+        if (choiceResult.outcome === 'accepted') {
+          console.log('User accepted the A2HS prompt');
+          document.getElementById('install-instructions').style.display = 'none';
+        }
+        deferredPrompt = null;
+      });
+    }
+  }
+</script>
+
+   
 </body>
 </html>
