quran pwa (#1)

kimmyxpow · Jul 19, 2023 · 2fdf13d · 2fdf13d
1 parent 441e268
commit 2fdf13d
Show file tree

Hide file tree

Showing 16 changed files with 3,703 additions and 173 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/PowQuranSample.iml b/.idea/PowQuranSample.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/ceklist.json b/ceklist.json
@@ -0,0 +1,3 @@
+1. web
+2. manifest
+3. service worker
diff --git a/dist/js/main.js b/dist/js/main.js
@@ -1,4 +1,21 @@
 let params = new URLSearchParams(location.search);
+const baseUrl = "https://api.quran.gading.dev/surah"
+
+const registerServiceWorker = async () => {
+    if ('serviceWorker' in window.navigator) {
+        // register service worker
+        const registration = await window.navigator.serviceWorker.register("./sw.js")
+
+        if (registration.installing) console.log("installing service worker")
+        else if (registration.waiting) console.log("service worker installed")
+        else if (registration.active) console.log("service worker active")
+    } else {
+        console.log("service worker doesnot support")
+    }
+}
+
+registerServiceWorker()
+
 
 if (params.get("surat") == null) {
     document.location.href = "?surat=1";
@@ -19,7 +36,7 @@ if (params.get("surat") == null) {
             const inputValue = e.target.querySelector("input").value;
             let keyword;
 
-            fetch("https://api.quran.sutanlab.id/surah")
+            fetch(baseUrl)
                 .then((response) => response.json())
                 .then((response) => {
                     for (let i = 0; i < response.data.length; i++) {
@@ -41,7 +58,7 @@ if (params.get("surat") == null) {
 
     const surat = params.get("surat");
 
-    fetch("https://api.quran.sutanlab.id/surah/" + surat)
+    fetch(`${baseUrl}/${surat}`)
         .then((response) => response.json())
         .then((response) => {
             let ayahList = document.querySelector("#ayah-list");
@@ -73,7 +90,7 @@ if (params.get("surat") == null) {
             ayahList.innerHTML = ayah;
         });
 
-        fetch("https://api.quran.sutanlab.id/surah")
+        fetch(baseUrl)
             .then((response) => response.json())
             .then((response) => {
                 let surahList = document.querySelector("#surah-list");

diff --git a/index.html b/index.html
@@ -13,6 +13,7 @@
   <meta name="description" class="web-desc" content="PowQuran adalah Al-Quran online yang bisa di akses di handphone ataupun laptop dengan mudah, mengaji dan dengarkan ayat-ayat suci dimanapun kamu berada!">
   <meta name="keywords" content="al-quran, quran, islam,  muslim, surah, ayat" />
   <link rel="canonical" href="https://abinoval.github.io/PowQuran/">
+  <link rel="manifest" href="manifest.json">
 
   <!-- Open Graph / Facebook -->
   <meta property="og:type" content="website">

diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,28 @@
+{
+  "name": "Quran Application",
+  "short_name": "Quran",
+  "theme_color": "#fff",
+  "background_color": "#fff",
+  "display": "standalone",
+  "orientation": "portrait",
+  "scope": "/",
+  "start_url": "/?surat=1",
+  "description": "Quran Reader Application",
+  "icons": [{
+    "src": "src/images/quran512.png",
+    "sizes": "512x512",
+    "type": "image/png"
+  },{
+    "src": "src/images/quran128.png",
+    "sizes": "128x128",
+    "type": "image/png"
+  },{
+    "src": "src/images/quran64.png",
+    "sizes": "64x64",
+    "type": "image/png"
+  },{
+    "src": "src/images/quran48.png",
+    "sizes": "48x48",
+    "type": "image/png"
+  }]
+}
diff --git a/offline-page.html b/offline-page.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Offline Quran Page</title>
+</head>
+<body>
+    <b>Please try with stable connection</b>
+</body>
+</html>