add pwa

JesmoDev · JesmoDev · commit 9ba7a1de473d · 2023-01-07T12:01:56.000+01:00
diff --git a/index.html b/index.html
@@ -3,11 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/bill-fill.svg" />
+    <link rel="manifest" href="jamnz.webmanifest" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Jamnz</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script src="register-sw.js"></script>
   </body>
 </html>
diff --git a/jamnz.webmanifest b/jamnz.webmanifest
@@ -0,0 +1,12 @@
+{
+  "name": "Jamnz",
+  "icons": [
+    {
+      "src": "JamnzLogo.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone"
+}
diff --git a/public/JamnzLogo.png b/public/JamnzLogo.png
diff --git a/register-sw.js b/register-sw.js
@@ -0,0 +1,5 @@
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker.register("/service-worker.js");
+  });
+}
diff --git a/service-worker.js b/service-worker.js
@@ -0,0 +1,41 @@
+const cacheName = "jamnz";
+const staticAssets = ["./index.html", "./register-sw.js"];
+
+self.addEventListener("install", async (e) => {
+  const cache = await caches.open(cacheName);
+  await cache.addAll(staticAssets);
+  return self.skipWaiting();
+});
+
+self.addEventListener("activate", (e) => {
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", async (e) => {
+  const req = e.request;
+  const url = new URL(req.url);
+
+  if (url.origin === location.origin) {
+    e.respondWith(cacheFirst(req));
+  } else {
+    e.respondWith(networkAndCache(req));
+  }
+});
+
+async function cacheFirst(req) {
+  const cache = await caches.open(cacheName);
+  const cached = await cache.match(req);
+  return cached || fetch(req);
+}
+
+async function networkAndCache(req) {
+  const cache = await caches.open(cacheName);
+  try {
+    const fresh = await fetch(req);
+    await cache.put(req, fresh.clone());
+    return fresh;
+  } catch (e) {
+    const cached = await cache.match(req);
+    return cached;
+  }
+}
