Adding pwa support

makersmecca · Dec 29, 2024 · c8ad64d · c8ad64d
2 parents 8ee5f45 + c8f6d21
commit c8ad64d
Show file tree

Hide file tree

Showing 38 changed files with 394 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -2,8 +2,30 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/jpeg" href="/pageLogo.jpeg" />
-    <link rel="icon" type="image/png" href="/IMG_5424.png" />
+    <!-- manifes json -->
+    <link rel="manifest" href="/manifest.json" />
+
+    <!-- Icons -->
+    <!-- <link rel="icon" type="image/jpeg" href="/pageLogo.jpeg" />
+    <link rel="icon" type="image/png" href="/IMG_5424.png" /> -->
+    <link rel="icon" type="image/png" href="/Icons/icon-72x72.png" />
+    <link rel="icon" type="image/png" href="/Icons/icon-96x96.png" />
+    <link rel="icon" type="image/png" href="/Icons/icon-128x128.png" />
+    <link rel="icon" type="image/png" href="/Icons/icon-144x144.png" />
+    <link rel="icon" type="image/png" href="/Icons/icon-152x152.png" />
+    <link rel="icon" type="image/png" href="/Icons/icon-192x192.png" />
+    <link rel="icon" type="image/png" href="/Icons/icon-512x512.png" />
+
+    <!-- ios icons -->
+    <link rel="apple-touch-icon" href="/ios/16.png" />
+    <link rel="apple-touch-icon" href="/ios/32.png" />
+    <link rel="apple-touch-icon" href="/ios/72.png" />
+    <link rel="apple-touch-icon" href="/ios/144.png" />
+    <link rel="apple-touch-icon" href="/ios/192.png" />
+    <link rel="apple-touch-icon" href="/ios/256.png" />
+    <link rel="apple-touch-icon" href="/ios/512.png" />
+    <link rel="apple-touch-icon" href="/ios/1024.png" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="theme-color" content="#ffffff" />

diff --git a/public/Icons/icon-128x128.png b/public/Icons/icon-128x128.png
diff --git a/public/Icons/icon-144x144.png b/public/Icons/icon-144x144.png
diff --git a/public/Icons/icon-152x152.png b/public/Icons/icon-152x152.png
diff --git a/public/Icons/icon-192x192.png b/public/Icons/icon-192x192.png
diff --git a/public/Icons/icon-384x384.png b/public/Icons/icon-384x384.png
diff --git a/public/Icons/icon-512x512.png b/public/Icons/icon-512x512.png
diff --git a/public/Icons/icon-72x72.png b/public/Icons/icon-72x72.png
diff --git a/public/Icons/icon-96x96.png b/public/Icons/icon-96x96.png
diff --git a/public/android/android-launchericon-144-144.png b/public/android/android-launchericon-144-144.png
diff --git a/public/android/android-launchericon-192-192.png b/public/android/android-launchericon-192-192.png
diff --git a/public/android/android-launchericon-48-48.png b/public/android/android-launchericon-48-48.png
diff --git a/public/android/android-launchericon-512-512.png b/public/android/android-launchericon-512-512.png
diff --git a/public/android/android-launchericon-72-72.png b/public/android/android-launchericon-72-72.png
diff --git a/public/android/android-launchericon-96-96.png b/public/android/android-launchericon-96-96.png
diff --git a/public/fallback.html b/public/fallback.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="/Icons/icon-72x72.png" />
+    <link rel="icon" type="image/png" href="/Icons/icon-96x96.png" />
+    <link rel="icon" type="image/png" href="/Icons/icon-128x128.png" />
+    <link rel="icon" type="image/png" href="/Icons/icon-144x144.png" />
+    <link rel="icon" type="image/png" href="/Icons/icon-152x152.png" />
+    <link rel="icon" type="image/png" href="/Icons/icon-192x192.png" />
+    <link rel="icon" type="image/png" href="/Icons/icon-512x512.png" />
+    <title>Vibie</title>
+    <link rel="apple-touch-icon" href="/Icons/icon-192x192.png" />
+    <meta name="theme-color" content="#ffffff" />
+  </head>
+  <body>
+    <div class="mainContent">
+      <div>
+        <img
+          src="Icons/icon-512x512.png"
+          alt="Logo"
+          height="80px"
+          width="80px"
+          class="icon"
+        />
+      </div>
+      <p class="line1 sour-gummy-fontName">Uh Oh!</p>
+      <p class="line2 sour-gummy-fontName">You seem to be Offline!</p>
+      <a href="/"><button class="sour-gummy-fontName">Retry</button></a>
+    </div>
+    <style>
+      .sour-gummy-fontName {
+        font-family: "SourGummy", sans-serif;
+        font-optical-sizing: auto;
+        font-weight: 100;
+        font-style: normal;
+        font-variation-settings: "wdth" 100;
+      }
+      .mainContent {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 250px;
+      }
+
+      .icon {
+        border-radius: 20px;
+      }
+      .line1 {
+        font-size: 30px;
+        font-weight: 600;
+      }
+      .line2 {
+        font-size: 20px;
+        font-weight: 400;
+      }
+      body {
+        background-color: #ffffff;
+        color: black;
+      }
+      a {
+        margin-top: 45px;
+      }
+      button {
+        border-radius: 30px;
+        border-width: 0;
+        width: 80px;
+        height: 40px;
+        font-family: "SourGummy", sans-serif;
+        font-weight: 600;
+        font-size: 15px;
+        background-color: #111827;
+        color: aliceblue;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+      }
+
+      button:hover {
+        background-color: #1c2333;
+      }
+
+      button:active {
+        background-color: #1c2333;
+      }
+    </style>
+  </body>
+</html>
diff --git a/public/ios/1024.png b/public/ios/1024.png
diff --git a/public/ios/144.png b/public/ios/144.png
diff --git a/public/ios/16.png b/public/ios/16.png
diff --git a/public/ios/192.png b/public/ios/192.png
diff --git a/public/ios/256.png b/public/ios/256.png
diff --git a/public/ios/32.png b/public/ios/32.png
diff --git a/public/ios/512.png b/public/ios/512.png
diff --git a/public/ios/72.png b/public/ios/72.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,146 @@
+{
+  "name": "Vibie",
+  "short_name": "Vibie",
+  "description": "Vibie, A dynamic social media platform designed to connect users and let them share moments from their lives! Whether you're showcasing your creativity, capturing life’s moments, or just vibing with friends, Vibie is your go-to platform. Join the #vibe-tribe.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#ffffff",
+  "icons": [
+    {
+      "src": "android/android-launchericon-512-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "android/android-launchericon-192-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android/android-launchericon-144-144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "android/android-launchericon-96-96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "android/android-launchericon-72-72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "android/android-launchericon-48-48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "ios/16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "ios/32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "ios/72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "ios/144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "ios/192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "ios/256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "ios/512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "ios/1024.png",
+      "sizes": "1024x1024",
+      "type": "image/png"
+    },
+    {
+      "src": "windows11/SplashScreen.scale-100.png",
+      "sizes": "620x300",
+      "type": "image/png"
+    },
+    {
+      "src": "windows11/SplashScreen.scale-125.png",
+      "sizes": "775x375",
+      "type": "image/png"
+    },
+    {
+      "src": "windows11/SplashScreen.scale-150.png",
+      "sizes": "930x450",
+      "type": "image/png"
+    },
+    {
+      "src": "windows11/SplashScreen.scale-200.png",
+      "sizes": "1240x600",
+      "type": "image/png"
+    },
+    {
+      "src": "windows11/SplashScreen.scale-400.png",
+      "sizes": "2480x1200",
+      "type": "image/png"
+    },
+    {
+      "src": "windows11/Square44x44Logo.altform-lightunplated_targetsize-32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "windows11/Square44x44Logo.altform-lightunplated_targetsize-44.png",
+      "sizes": "44x44",
+      "type": "image/png"
+    },
+    {
+      "src": "windows11/Square44x44Logo.altform-lightunplated_targetsize-64.png",
+      "sizes": "64x64",
+      "type": "image/png"
+    },
+    {
+      "src": "windows11/Square44x44Logo.altform-lightunplated_targetsize-96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "windows11/Square44x44Logo.altform-lightunplated_targetsize-256.png",
+      "sizes": "256x256",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "orientation": "any",
+  "categories": ["entertainment", "social media"],
+  "prefer_related_applications": false,
+  "shortcuts": [
+    {
+      "name": "Vibie",
+      "short_name": "Vibie",
+      "description": "Vibie, A dynamic social media platform designed to connect users and let them share moments from their lives!",
+      "url": "/?action=start",
+      "icons": [{ "src": "ios/192.png", "sizes": "192x192" }]
+    }
+  ]
+}
diff --git a/public/sw.js b/public/sw.js
@@ -0,0 +1,91 @@
+const OFFLINE_VER = "1.1.0";
+const CACHE_NAME = "vbe" + OFFLINE_VER;
+const OFFLINE_URL = "fallback.html";
+
+const assets = [
+  "/",
+  "/index.html",
+  "/static/js/main.bundle.js", // Your main React bundle
+  "/manifest.json",
+  "fallback.html",
+  "android/android-launchericon-48-48.png",
+  "android/android-launchericon-72-72.png",
+  "android/android-launchericon-96-96.png",
+  "android/android-launchericon-144-144.png",
+  "android/android-launchericon-192-192.png",
+  "android/android-launchericon-512-512.png",
+  "ios/1024.png",
+  "ios/512.png",
+  "ios/256.png",
+  "ios/192.png",
+  "ios/144.png",
+  "ios/72.png",
+  "ios/32.png",
+  "ios/16.png",
+  "windows11/Square44x44Logo.altform-lightunplated_targetsize-32.png",
+  "windows11/Square44x44Logo.altform-lightunplated_targetsize-44.png",
+  "windows11/Square44x44Logo.altform-lightunplated_targetsize-64.png",
+  "windows11/Square44x44Logo.altform-lightunplated_targetsize-96.png",
+  "windows11/Square44x44Logo.altform-lightunplated_targetsize-256.png",
+  "windows11/SplashScreen.scale-100.png",
+  "windows11/SplashScreen.scale-125.png",
+  "windows11/SplashScreen.scale-150.png",
+  "windows11/SplashScreen.scale-200.png",
+  "windows11/SplashScreen.scale-400.png",
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches
+      .open(CACHE_NAME)
+      .then((cache) => {
+        console.log("Caching offline assets");
+        return cache.addAll(assets);
+      })
+      .catch((error) => console.error("Error caching assets", error))
+  );
+  self.skipWaiting();
+});
+// Activate event: Clean up old caches
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames
+          .filter((cacheName) => cacheName !== CACHE_NAME)
+          .map((cacheName) => caches.delete(cacheName))
+      );
+    })
+  );
+  self.clients.claim();
+});
+// Fetch event: Serve cached assets, fallback to offline page on failure
+self.addEventListener("fetch", (event) => {
+  if (event.request.mode === "navigate") {
+    //navigation requests
+    event.respondWith(
+      (async () => {
+        try {
+          // Network fetch
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) {
+            return preloadResponse;
+          }
+          const networkResponse = await fetch(event.request);
+          return networkResponse;
+        } catch (error) {
+          console.error("Network failed; returning offline page", error);
+          const cache = await caches.open(CACHE_NAME);
+          return await cache.match(OFFLINE_URL);
+        }
+      })()
+    );
+  } else {
+    //non-navigation requests
+    event.respondWith(
+      caches.match(event.request).then((cachedResponse) => {
+        return cachedResponse || fetch(event.request);
+      })
+    );
+  }
+});
diff --git a/public/windows11/SplashScreen.scale-100.png b/public/windows11/SplashScreen.scale-100.png
diff --git a/public/windows11/SplashScreen.scale-125.png b/public/windows11/SplashScreen.scale-125.png
diff --git a/public/windows11/SplashScreen.scale-150.png b/public/windows11/SplashScreen.scale-150.png
diff --git a/public/windows11/SplashScreen.scale-200.png b/public/windows11/SplashScreen.scale-200.png
diff --git a/public/windows11/SplashScreen.scale-400.png b/public/windows11/SplashScreen.scale-400.png
diff --git a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-256.png b/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-256.png
diff --git a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-32.png b/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-32.png
diff --git a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-44.png b/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-44.png
diff --git a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-64.png b/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-64.png
diff --git a/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-96.png b/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-96.png