Merge pull request #16 from asim/pwa

Setup PWA
asim · Feb 21, 2025 · e150cfa · e150cfa
2 parents c69250c + 8553458
commit e150cfa
Show file tree

Hide file tree

Showing 12 changed files with 411 additions and 20 deletions.
diff --git a/html/files/api.html b/html/files/api.html
@@ -3,6 +3,7 @@
   <head>
     <title>API | Reminder</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="manifest" href="/manifest.webmanifest">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
@@ -60,6 +61,7 @@
         <a href="/names">Names</a>
         <a href="/hadith">Hadith</a>
         <a href="/search">Search</a>
+        <button id="install" hidden>Install</button>
       </div>
       <div id="content"><h1 id="endpoints">Endpoints</h1>
 
@@ -212,5 +214,47 @@ <h4 id="response-6">Response</h4>
 <p></p>
 </div>
     </div>
+    </div>
+
+  <script>
+      if (navigator.serviceWorker) {
+        navigator.serviceWorker.register (
+          '/reminder.js',
+          {scope: '/'}
+        )
+      }
+  </script>
+  <script>
+        let installPrompt = null;
+        const installButton = document.querySelector("#install");
+
+        window.addEventListener("beforeinstallprompt", (event) => {
+          event.preventDefault();
+          installPrompt = event;
+          installButton.removeAttribute("hidden");
+        });
+
+        installButton.addEventListener("click", async () => {
+          if (!installPrompt) {
+            return;
+          }
+          const result = await installPrompt.prompt();
+          disableInAppInstallPrompt();
+        });
+
+        function disableInAppInstallPrompt() {
+          installPrompt = null;
+          installButton.setAttribute("hidden", "");
+        }
+
+        window.addEventListener("appinstalled", () => {
+          disableInAppInstallPrompt();
+        });
+
+        function disableInAppInstallPrompt() {
+          installPrompt = null;
+          installButton.setAttribute("hidden", "");
+        }
+  </script>
   </body>
 </html>
diff --git a/html/files/files.go b/html/files/files.go
@@ -7,6 +7,9 @@ import (
 //go:embed *.html
 //go:embed *.json
 //go:embed *.otf
+//go:embed *.js
+//go:embed *.png
+//go:embed manifest.webmanifest
 var files embed.FS
 
 func Get(name string) string {

diff --git a/html/files/hadith.html b/html/files/hadith.html
@@ -3,6 +3,7 @@
   <head>
     <title>Hadith | Reminder</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="manifest" href="/manifest.webmanifest">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
@@ -60,6 +61,7 @@
         <a href="/names">Names</a>
         <a href="/hadith">Hadith</a>
         <a href="/search">Search</a>
+        <button id="install" hidden>Install</button>
       </div>
       <div id="content"><h1 id="volume-1">Volume 1</h1>
 
@@ -44574,5 +44576,47 @@ <h4 id="by-narrated-by-abu-huraira-938">By Narrated by Abu Huraira</h4>
 <p>The Prophet said, &ldquo;(There are) two words which are dear to the Beneficent (Allah) and very light (easy) for the tongue (to say), but very heavy in weight in the balance. They are: &lsquo;Subhan Allah wa-bi hamdihi&rsquo; and &lsquo;Subhan Allah Al-&lsquo;Azim.&rdquo; (See Hadith No. 673, Vol. 8).</p>
 </div>
     </div>
+    </div>
+
+  <script>
+      if (navigator.serviceWorker) {
+        navigator.serviceWorker.register (
+          '/reminder.js',
+          {scope: '/'}
+        )
+      }
+  </script>
+  <script>
+        let installPrompt = null;
+        const installButton = document.querySelector("#install");
+
+        window.addEventListener("beforeinstallprompt", (event) => {
+          event.preventDefault();
+          installPrompt = event;
+          installButton.removeAttribute("hidden");
+        });
+
+        installButton.addEventListener("click", async () => {
+          if (!installPrompt) {
+            return;
+          }
+          const result = await installPrompt.prompt();
+          disableInAppInstallPrompt();
+        });
+
+        function disableInAppInstallPrompt() {
+          installPrompt = null;
+          installButton.setAttribute("hidden", "");
+        }
+
+        window.addEventListener("appinstalled", () => {
+          disableInAppInstallPrompt();
+        });
+
+        function disableInAppInstallPrompt() {
+          installPrompt = null;
+          installButton.setAttribute("hidden", "");
+        }
+  </script>
   </body>
 </html>
diff --git a/html/files/index.html b/html/files/index.html
@@ -3,6 +3,7 @@
   <head>
     <title>Index | Reminder</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="manifest" href="/manifest.webmanifest">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
@@ -60,63 +61,102 @@
         <a href="/names">Names</a>
         <a href="/hadith">Hadith</a>
         <a href="/search">Search</a>
+        <button id="install" hidden>Install</button>
       </div>
       <div id="content"><h1 id="what-is-the-reminder">What is the Reminder?</h1>
 
-<p>The &ldquo;Reminder&rdquo; often refers to the Quran, which is described as guidance and a reminder for humanity. It is a message from Allah to guide people, emphasizing reflection and adherence to divine teachings.</p>
+<p>The Reminder refers to the Quran, which is a guidance and a message for humanity. It serves as a divine revelation preserved by Allah, providing guidance, wisdom, and warnings to all people.</p>
 
 <h1 id="what-is-the-quran">What is the Quran?</h1>
 
-<p>The Quran is the holy book of Islam, believed by Muslims to be the word of God as revealed to the Prophet Muhammad. It is written in Arabic and consists of verses that provide guidance, law, and spiritual teachings. It is considered a clear book, rich in wisdom, and a guide and mercy for people of faith.</p>
+<p>The Quran is the holy book of Islam, believed to be the word of Allah delivered to the Prophet Muhammad through the angel Gabriel. It serves as a guide and mercy for those with sure faith, offering insights, reminders, and clear revelations in Arabic. The Quran is considered a confirmation of previous scriptures and is preserved in its original form. It is a source of spiritual and legal guidance for Muslims.</p>
 
 <h1 id="what-is-the-hadith">What is the Hadith?</h1>
 
-<p>A Hadith is a report or narration of the sayings, actions, or approvals of the Prophet Muhammad (peace be upon him). Hadiths serve as important sources of Islamic teaching and law, second only to the Quran. They provide guidance on various aspects of life and help in understanding the Quran&rsquo;s application. Hadiths are collected and compiled from the Prophet&rsquo;s companions and are classified based on their authenticity.</p>
+<p>A Hadith is a narration or a report detailing the sayings, actions, or approvals of the Prophet Muhammad. It serves as a significant source of Islamic teachings and law, second only to the Quran.</p>
 
 <h1 id="who-is-allah">Who is Allah?</h1>
 
-<p>Allah is the One and only God in Islam, the Creator of all things, the Sustainer of the universe, and the Most Compassionate, Most Merciful. Allah is described as the Knower of the seen and unseen, the Almighty, the Supreme in Might, the All-Perfect, and the Watcher over all.</p>
+<p>Allah is the one true God in Islam, the Creator of the heavens and the earth. He is the Most Compassionate, Most Merciful, All-Knowing, and All-Wise. Everything in creation glorifies Him, and He is the Sustainer and Maintainer of all things. There is no deity worthy of worship except Allah, and all creatures will return to Him.</p>
 
 <h1 id="who-is-the-prophet-muhammad">Who is the prophet Muhammad</h1>
 
-<p>Prophet Muhammad is the Messenger of Allah, known as the final prophet in Islam. He was sent as a witness, a bearer of glad tidings, and a warner. He is described in the Quran and Hadith as compassionate, a man of good character, and the seal of the prophets, emphasizing that no prophets will come after him. Among Muslims, he is deeply revered for his role in spreading the message of Islam and as a model of righteous living.</p>
+<p>Prophet Muhammad is considered the last prophet in Islam, sent by Allah to guide humanity. He is regarded as the &ldquo;Messenger of Allah&rdquo; and the &ldquo;Seal of the Prophets.&rdquo; Muhammad was born in Mecca and received divine revelations from Allah, which are recorded in the Quran, the holy book of Islam. Muslims believe he was sent as a witness, a bringer of glad tidings, and a warner. Prophet Muhammad is highly respected for his character, teachings, and as a mercy to the worlds.</p>
 
 <h1 id="why-do-we-worship-allah">Why do we &lsquo;worship&rsquo; Allah?</h1>
 
-<p>We worship Allah because He alone is worthy of worship, being the Creator and Sustainer of everything. Worshiping Allah is an expression of gratitude, obedience, and recognition of His ultimate authority and divine attributes. The Quran emphasizes worshiping Allah alone, associating no partners with Him, and being devoted to Him sincerely.</p>
+<p>We worship Allah because He is the Creator and Sustainer of all things, and the only One worthy of worship. Worshipping Allah is a fundamental aspect of Islamic faith, emphasizing our devotion, gratitude, and obedience to Him. It helps us maintain a strong spiritual connection, seek guidance, and fulfill the purpose of our existence.</p>
 
 <h1 id="how-do-we-worship-allah">How do we &lsquo;worship&rsquo; Allah?</h1>
 
-<p>Worshiping Allah involves devotion, prayer, and following His commands sincerely and wholeheartedly. It includes acts such as offering the five daily prayers, reciting Quran, fasting during Ramadan, giving charity, and making supplications. It also encompasses living a life of obedience to Allah and following the teachings of the Prophet Muhammad. Worship should be done with sincerity, aiming to please Allah alone.</p>
+<p>Worshipping Allah involves believing in Him and associating nothing with Him. It includes performing acts such as offering prayers, showing gratitude, establishing prayer, giving charity, fasting, and performing good deeds sincerely for His sake. Worship also means following Allah&rsquo;s commands, maintaining sincerity and devotion in all actions dedicated to Him, and fulfilling the rights and responsibilities He has prescribed.</p>
 
 <h1 id="what-happens-when-we-die">What happens when we die?</h1>
 
-<p>According to Islamic teachings, when a person dies, their soul is taken by the angel of death and they are placed in their grave. They are then shown their place in either Paradise or Hell. The deceased is also questioned by two angels about their faith. The soul remains in a state known as Barzakh until the Day of Resurrection, when all will be resurrected for judgment by Allah.</p>
+<p>According to Islamic teachings, when a person dies, their soul is taken by angels and they experience the state of barzakh, an intermediary stage until the Day of Judgment. On that day, all people will be resurrected and judged by Allah based on their deeds. Those who were righteous will be awarded Paradise, while those who did evil will face punishment in Hell.</p>
 
 <h1 id="how-do-i-remember-allah">How do I remember Allah?</h1>
 
-<p>To remember Allah, you can engage in practices such as:</p>
+<p>To remember Allah, you can:</p>
 
 <ol>
-<li><p><strong>Regular Prayer (Salah):</strong> Perform the five daily prayers as a way to constantly connect with Allah.</p></li>
+<li><p>Engage in regular prayer (Salat) and establish it as a routine.</p></li>
 
-<li><p><strong>Recitation and Reflection:</strong> Recite and reflect upon the Quran. It is described as being made easy for remembrance (Quran 54:17).</p></li>
+<li><p>Recite and reflect on the Quran frequently.</p></li>
 
-<li><p><strong>Supplication (Dua):</strong> Engage in regular supplication, asking for Allah’s guidance and remembering His attributes.</p></li>
+<li><p>Engage in Dhikr, which involves repeating praises and supplications.</p></li>
 
-<li><p><strong>Dhikr (Remembrance):</strong> Repeat phrases that glorify and praise Allah, such as &ldquo;SubhanAllah,&rdquo; &ldquo;Alhamdulillah,&rdquo; and &ldquo;Allahu Akbar.&rdquo;</p></li>
+<li><p>Remember Allah&rsquo;s blessings and express gratitude.</p></li>
 
-<li><p><strong>Gratitude and Mindfulness:</strong> Be grateful for Allah’s favors, and strive to be mindful of Him in every aspect of life (Quran 62:10).</p></li>
-
-<li><p><strong>Learning and Teaching:</strong> Share the knowledge of Islam with others and learn about Allah’s names and attributes.</p></li>
-</ol>
-
-<p>Implementing these practices can help keep your heart and mind focused on Allah.</p>
+<li><p>Maintain mindfulness of Allah in daily actions and decisions.</p>
 
 <h1 id="how-do-i-become-muslim">How do I become Muslim?</h1>
 
-<p>To become Muslim, you need to sincerely declare the Shahada, which is the Islamic declaration of faith. The Shahada is: &ldquo;Ashhadu an la ilaha illallah, wa ashhadu anna Muhammadur Rasulullah,&rdquo; meaning &ldquo;I bear witness that there is no god but Allah, and I bear witness that Muhammad is the Messenger of Allah.&rdquo; This declaration should be made with sincerity and conviction. After declaring the Shahada, it is encouraged to learn and follow the teachings and practices of Islam.</p>
+<p>To become a Muslim, you need to sincerely proclaim the Shahada, which is the testimony of faith. The Shahada is: &ldquo;Ashhadu an la ilaha illallah, wa ashhadu anna Muhammadur rasulullah.&rdquo; This means, &ldquo;I bear witness that there is no god but Allah, and I bear witness that Muhammad is the Messenger of Allah.&rdquo; It is important to say this with sincere belief and understanding. Embracing Islam also involves accepting its core beliefs and practices, such as belief in one God, the prophets, and the Quran, and committing to follow the principles of Islam in your life.</p></li>
+</ol>
 </div>
     </div>
+    </div>
+
+  <script>
+      if (navigator.serviceWorker) {
+        navigator.serviceWorker.register (
+          '/reminder.js',
+          {scope: '/'}
+        )
+      }
+  </script>
+  <script>
+        let installPrompt = null;
+        const installButton = document.querySelector("#install");
+
+        window.addEventListener("beforeinstallprompt", (event) => {
+          event.preventDefault();
+          installPrompt = event;
+          installButton.removeAttribute("hidden");
+        });
+
+        installButton.addEventListener("click", async () => {
+          if (!installPrompt) {
+            return;
+          }
+          const result = await installPrompt.prompt();
+          disableInAppInstallPrompt();
+        });
+
+        function disableInAppInstallPrompt() {
+          installPrompt = null;
+          installButton.setAttribute("hidden", "");
+        }
+
+        window.addEventListener("appinstalled", () => {
+          disableInAppInstallPrompt();
+        });
+
+        function disableInAppInstallPrompt() {
+          installPrompt = null;
+          installButton.setAttribute("hidden", "");
+        }
+  </script>
   </body>
 </html>
diff --git a/html/files/manifest.webmanifest b/html/files/manifest.webmanifest
@@ -0,0 +1,17 @@
+{
+  "name": "Reminder",
+  "short_name": "reminder",
+  "description": "Quran, Hadith and Names of Allah all in one app",
+  "scope": "/",
+  "start_url": "/",
+  "background_color": "#ffffff",
+  "theme_color": "#ffffff",
+  "display": "standalone", 
+  "icons": [
+      {
+        "src": "/reminder.png",
+        "type": "image/png",
+        "sizes": "300x300"
+      }
+  ]
+}
diff --git a/html/files/names.html b/html/files/names.html
@@ -3,6 +3,7 @@
   <head>
     <title>Names | Reminder</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="manifest" href="/manifest.webmanifest">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
@@ -60,6 +61,7 @@
         <a href="/names">Names</a>
         <a href="/hadith">Hadith</a>
         <a href="/search">Search</a>
+        <button id="install" hidden>Install</button>
       </div>
       <div id="content">
 <h1 id="1">1</h1>
@@ -1746,5 +1748,47 @@ <h4 class="english">Summary</h4>
 
 </div>
     </div>
+    </div>
+
+  <script>
+      if (navigator.serviceWorker) {
+        navigator.serviceWorker.register (
+          '/reminder.js',
+          {scope: '/'}
+        )
+      }
+  </script>
+  <script>
+        let installPrompt = null;
+        const installButton = document.querySelector("#install");
+
+        window.addEventListener("beforeinstallprompt", (event) => {
+          event.preventDefault();
+          installPrompt = event;
+          installButton.removeAttribute("hidden");
+        });
+
+        installButton.addEventListener("click", async () => {
+          if (!installPrompt) {
+            return;
+          }
+          const result = await installPrompt.prompt();
+          disableInAppInstallPrompt();
+        });
+
+        function disableInAppInstallPrompt() {
+          installPrompt = null;
+          installButton.setAttribute("hidden", "");
+        }
+
+        window.addEventListener("appinstalled", () => {
+          disableInAppInstallPrompt();
+        });
+
+        function disableInAppInstallPrompt() {
+          installPrompt = null;
+          installButton.setAttribute("hidden", "");
+        }
+  </script>
   </body>
 </html>