try pwa again

sigmaSd · Apr 23, 2024 · 700edb3 · 700edb3
1 parent 1c5b345
commit 700edb3
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 1 deletion.
diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -1,5 +1,5 @@
 import { Head, Partial } from "$fresh/runtime.ts";
-import { AppProps } from "$fresh/server.ts";
+import type { AppProps } from "$fresh/server.ts";
 import NavigationBar from "@/components/NavigationBar.tsx";
 import AudioPlay from "@/components/AudioPlay.tsx";
 
@@ -9,6 +9,9 @@ export default function App({ Component }: AppProps) {
       <Head>
         <title>Rodio</title>
         <link rel="icon" href="/favicon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="manifest" href="/pwa/manifest.json" />
+        <script defer src="/pwa/app.js" />
       </Head>
       <NavigationBar />
       <body f-client-nav>

diff --git a/static/pwa/app.js b/static/pwa/app.js
@@ -0,0 +1,9 @@
+if ("serviceWorker" in navigator) {
+  addEventListener("load", function () {
+    navigator.serviceWorker
+      // we're going to give it scope / so it needs to be in the root of the repo
+      .register("/sw.js")
+      .then(() => console.log("service worker registered"))
+      .catch((err) => console.log("service worker not registered", err));
+  });
+}
diff --git a/static/pwa/favicon.png b/static/pwa/favicon.png
diff --git a/static/pwa/manifest.json b/static/pwa/manifest.json
@@ -0,0 +1,12 @@
+{
+  "name": "My App",
+  "start_url": "/",
+  "display": "standalone",
+  "icons": [
+    {
+      "src": "/pwa/favicon.png",
+      "type": "image/png",
+      "sizes": "256x256"
+    }
+  ]
+}
diff --git a/static/sw.js b/static/sw.js
@@ -0,0 +1,24 @@
+// Cache requests so the app can work offline
+// https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers
+const cacheName = "myapp";
+
+self.addEventListener("fetch", (e) => {
+  e.respondWith(
+    (async () => {
+      try {
+        const response = await fetch(e.request);
+        const cache = await caches.open(cacheName);
+        console.log(`[Service Worker] Caching resource: ${e.request.url}`);
+        cache.put(e.request, response.clone());
+        return response;
+      } catch {
+        // if we have no network access, try to use the cache
+        const response = await caches.match(e.request);
+        console.log(`[Service Worker] Using cached resource: ${e.request.url}`);
+        if (response) {
+          return response;
+        }
+      }
+    })(),
+  );
+});