www updated

Sunbird-AIAssistant · Jul 12, 2024 · 30e37b9 · 30e37b9
1 parent 11bd427
commit 30e37b9
Show file tree

Hide file tree

Showing 5 changed files with 202 additions and 54 deletions.
diff --git a/src/assets/installPrompt.js b/src/assets/installPrompt.js
@@ -2,32 +2,65 @@
 
 let deferredPrompt;
 
+function showInstallDialog() {
+  const overlay = document.getElementById('overlay');
+  const installDialog = document.getElementById('installDialog');
+  overlay.style.display = 'block';
+  installDialog.style.display = 'block';
+}
+
+function hideInstallDialog() {
+  const overlay = document.getElementById('overlay');
+  const installDialog = document.getElementById('installDialog');
+  overlay.style.display = 'none';
+  installDialog.style.display = 'none';
+}
+
+function isPWAInstalled() {
+  const isIOS = () => {
+    const userAgent = window.navigator.userAgent.toLowerCase();
+    return /iphone|ipad|ipod/.test(userAgent);
+  };
+
+  const isInStandaloneMode = () => (
+    window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone
+  );
+
+  return isIOS() ? isInStandaloneMode() : window.matchMedia('(display-mode: standalone)').matches;
+}
+
 window.addEventListener('beforeinstallprompt', (e) => {
   // Prevent the mini-infobar from appearing on mobile
   e.preventDefault();
   // Stash the event so it can be triggered later
   deferredPrompt = e;
-  // Update UI notify the user they can install the PWA
-  const installButton = document.getElementById('installButton');
-  installButton.style.display = 'block';
-
-  installButton.addEventListener('click', () => {
-    // Hide the install button
-    installButton.style.display = 'none';
-    // Show the install prompt
-    deferredPrompt.prompt();
-    // Wait for the user to respond to the prompt
-    deferredPrompt.userChoice.then((choiceResult) => {
-      if (choiceResult.outcome === 'accepted') {
-        console.log('User accepted the install prompt');
-      } else {
-        console.log('User dismissed the install prompt');
-      }
-      deferredPrompt = null;
-    });
+
+  // Check if the PWA is already installed
+  if (!isPWAInstalled()) {
+    // Show the custom install dialog
+    showInstallDialog();
+  }
+});
+
+document.querySelector('#installDialog .install').addEventListener('click', () => {
+  hideInstallDialog();
+  // Show the install prompt
+  deferredPrompt.prompt();
+  // Wait for the user to respond to the prompt
+  deferredPrompt.userChoice.then((choiceResult) => {
+    if (choiceResult.outcome === 'accepted') {
+      console.log('User accepted the install prompt');
+    } else {
+      console.log('User dismissed the install prompt');
+    }
+    deferredPrompt = null;
   });
 });
 
+document.querySelector('#installDialog .cancel').addEventListener('click', () => {
+  hideInstallDialog();
+});
+
 window.addEventListener('appinstalled', () => {
   // Log install to analytics
   console.log('PWA was installed');

diff --git a/src/index.html b/src/index.html
@@ -20,24 +20,65 @@
 
   <meta name="theme-color" content="#1976d2">
   <style>
-    #installButton {
-      display: none; /* Initially hide the button */
+   #installDialog {
+      display: none;
       position: fixed;
-      bottom: 20px;
-      right: 20px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      padding: 20px;
+      background-color: white;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      z-index: 1000;
+    }
+
+    #installDialog .buttons {
+      margin-top: 20px;
+      text-align: right;
+    }
+
+    #installDialog button {
       padding: 10px 20px;
-      background-color: #007bff;
-      color: #fff;
+      margin-left: 10px;
       border: none;
       border-radius: 5px;
       cursor: pointer;
     }
+
+    #installDialog button.install {
+      background-color: #007bff;
+      color: white;
+    }
+
+    #installDialog button.cancel {
+      background-color: #cccccc;
+      color: black;
+    }
+
+    #overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 999;
+    }
   </style>
 </head>
 
 <body>
   <app-root></app-root>
-  <button id="installButton">Install PWA</button>
+  <div id="overlay"></div>
+  <div id="installDialog">
+    <p>Install this app on your device?</p>
+    <div class="buttons">
+      <button class="cancel">Cancel</button>
+      <button class="install">Install</button>
+    </div>
+  </div>
 
   <script src="assets/installPrompt.js"></script>
   <noscript>Please enable JavaScript to continue using this application.</noscript>

diff --git a/www/assets/installPrompt.js b/www/assets/installPrompt.js
@@ -2,32 +2,65 @@
 
 let deferredPrompt;
 
+function showInstallDialog() {
+  const overlay = document.getElementById('overlay');
+  const installDialog = document.getElementById('installDialog');
+  overlay.style.display = 'block';
+  installDialog.style.display = 'block';
+}
+
+function hideInstallDialog() {
+  const overlay = document.getElementById('overlay');
+  const installDialog = document.getElementById('installDialog');
+  overlay.style.display = 'none';
+  installDialog.style.display = 'none';
+}
+
+function isPWAInstalled() {
+  const isIOS = () => {
+    const userAgent = window.navigator.userAgent.toLowerCase();
+    return /iphone|ipad|ipod/.test(userAgent);
+  };
+
+  const isInStandaloneMode = () => (
+    window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone
+  );
+
+  return isIOS() ? isInStandaloneMode() : window.matchMedia('(display-mode: standalone)').matches;
+}
+
 window.addEventListener('beforeinstallprompt', (e) => {
   // Prevent the mini-infobar from appearing on mobile
   e.preventDefault();
   // Stash the event so it can be triggered later
   deferredPrompt = e;
-  // Update UI notify the user they can install the PWA
-  const installButton = document.getElementById('installButton');
-  installButton.style.display = 'block';
-
-  installButton.addEventListener('click', () => {
-    // Hide the install button
-    installButton.style.display = 'none';
-    // Show the install prompt
-    deferredPrompt.prompt();
-    // Wait for the user to respond to the prompt
-    deferredPrompt.userChoice.then((choiceResult) => {
-      if (choiceResult.outcome === 'accepted') {
-        console.log('User accepted the install prompt');
-      } else {
-        console.log('User dismissed the install prompt');
-      }
-      deferredPrompt = null;
-    });
+
+  // Check if the PWA is already installed
+  if (!isPWAInstalled()) {
+    // Show the custom install dialog
+    showInstallDialog();
+  }
+});
+
+document.querySelector('#installDialog .install').addEventListener('click', () => {
+  hideInstallDialog();
+  // Show the install prompt
+  deferredPrompt.prompt();
+  // Wait for the user to respond to the prompt
+  deferredPrompt.userChoice.then((choiceResult) => {
+    if (choiceResult.outcome === 'accepted') {
+      console.log('User accepted the install prompt');
+    } else {
+      console.log('User dismissed the install prompt');
+    }
+    deferredPrompt = null;
   });
 });
 
+document.querySelector('#installDialog .cancel').addEventListener('click', () => {
+  hideInstallDialog();
+});
+
 window.addEventListener('appinstalled', () => {
   // Log install to analytics
   console.log('PWA was installed');