pwa install button

TeaByte · Feb 15, 2024 · 4732ecf · 4732ecf
1 parent 8102b92
commit 4732ecf
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/routes/index.tsx b/routes/index.tsx
@@ -35,14 +35,15 @@ export default function IndexPage() {
               <p class="mx-auto text-lg leading-snug lg:w-1/2">
                 منصة تعليمية عربية. مخصصة لاكتساب مهارات لغة البرمجة جافاسكريبت بشكل ممتع ومبتكر. نتبنى نهجًا فريدًا يركز على التعلم التفاعلي والتطبيق العملي المباشر، مما يمكّن المتعلمين من فهم الأساسيات بشكل أعمق وتطبيق مهاراتهم على الفور.
               </p>
-              <div class="rounded-lg mt-4 mb-2">
+              <div class="mt-4 mb-2 flex flex-col md:flex-row justify-center items-center gap-1">
                 <a
                   href="/courses"
                   class="px-8 text-lg btn bg-base-content text-base-100 hover:bg-base-200 hover:text-base-content rounded-box"
                 >
                   <IconArrowBigRightLines class="ml-2" />
                   ابدأ الآن
                 </a>
+                <button id="install-pwa" class="px-6 text-lg btn bg-base-content text-base-100 hover:bg-base-200 hover:text-base-content rounded-box" style={{ display: 'none' }}>تحميل التطبيق</button>
               </div>
               <AboutIcons />
             </div>

diff --git a/static/JavaScript/index.js b/static/JavaScript/index.js
@@ -6,6 +6,40 @@ if (storedTheme) {
   localStorage.setItem("selectedTheme", "nord");
 }
 
+// PWA install button
+let installPrompt = null;
+document.addEventListener('DOMContentLoaded', () => {
+  if ('serviceWorker' in navigator && 'PushManager' in globalThis) {
+    globalThis.addEventListener('beforeinstallprompt', (e) => {
+      console.log('beforeinstallprompt fired');
+      const installButton = document.getElementById('install-pwa');
+      if (!installButton) {
+        console.log('install button not found');
+        return;
+      }
+      e.preventDefault();
+      installPrompt = e;
+      installButton.style.display = 'block';
+      installButton.addEventListener('click', () => {
+        installPrompt.prompt();
+        installPrompt.userChoice.then(choiceResult => {
+          if (choiceResult.outcome === 'accepted') {
+            console.log('App installed');
+          } else {
+            console.log('App installation declined');
+          }
+          disableInAppInstallPrompt()
+        });
+      });
+    });
+  }
+
+  function disableInAppInstallPrompt() {
+    installPrompt = null;
+    document.getElementById('install-pwa').style.display = 'none';
+  }
+})
+
 // Google analytics
 globalThis.dataLayer = globalThis.dataLayer || [];
 function gtag() { dataLayer.push(arguments); }

diff --git a/static/styles.css b/static/styles.css
@@ -104,8 +104,8 @@ mark::before {
   background-repeat: no-repeat;
   background-position: 50%;
   border-radius: 0.2rem;
-  height: 99%;
-  margin-top: 4px;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .gutter::before {