feat: basic pwa

ubiquity · Jan 30, 2024 · f72457d · f72457d
1 parent d23afec
commit f72457d
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 2 deletions.
diff --git a/build/esbuild-build.ts b/build/esbuild-build.ts
@@ -7,7 +7,7 @@ const typescriptEntries = [
   // "src/authenticated/authenticated.ts"
 ];
 const cssEntries = ["static/style/style.css"];
-const entries = [...typescriptEntries, ...cssEntries];
+const entries = [...typescriptEntries, ...cssEntries, "static/manifest.json", "static/favicon.svg"];
 
 export const esBuildContext: esbuild.BuildOptions = {
   define: createEnvDefines(["SUPABASE_URL", "SUPABASE_KEY"]),

diff --git a/src/home/home.ts b/src/home/home.ts
@@ -1,3 +1,5 @@
+import { pwa } from "../progressive-web-app";
+pwa();
 import { grid } from "../the-grid";
 import { authentication } from "./authentication";
 import { fetchAndDisplayPreviewsFromCache } from "./fetch-github/fetch-and-display-previews";

diff --git a/src/progressive-web-app.ts b/src/progressive-web-app.ts
@@ -0,0 +1,30 @@
+export function pwa() {
+  self.addEventListener("install", (event: InstallEvent) => {
+    event.waitUntil(
+      caches.open("v1").then((cache) => {
+        return cache.addAll(["/", "/dist/src/home/home.js", "/style/style.css", "/style/inverted-style.css", "/favicon.svg"]);
+      })
+    );
+  });
+
+  self.addEventListener("fetch", (event: FetchEvent) => {
+    event.respondWith(
+      caches.match(event.request).then((response) => {
+        return response || fetch(event.request);
+      })
+    );
+  });
+
+  if ("serviceWorker" in navigator) {
+    window.addEventListener("load", () => {
+      navigator.serviceWorker.register("/sw.js").then(
+        (registration) => {
+          console.log("ServiceWorker registration successful with scope: ", registration.scope);
+        },
+        (err) => {
+          console.log("ServiceWorker registration failed: ", err);
+        }
+      );
+    });
+  }
+}
diff --git a/static/index.html b/static/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
+
     <meta charset="UTF-8" />
     <title>DevPool Directory | Ubiquity DAO</title>
 
@@ -29,6 +30,10 @@
     <meta property="og:url" content="https://work.ubq.fi" />
     <meta property="twitter:domain" content="work.ubq.fi" />
     <meta property="twitter:url" content="https://work.ubq.fi" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover" />
+    <link rel="manifest" href="/manifest.json">
+
   </head>
   <body>
     <background><div id="grid"></div></background>

diff --git a/static/manifest.json b/static/manifest.json
@@ -0,0 +1,17 @@
+{
+    "name": "DevPool Directory | Ubiquity DAO",
+    "short_name": "DevPool Directory",
+    "description": "View and sort through all of the available work within the DevPool network.",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#000410",
+    "theme_color": "#000410",
+    "icons": [
+        {
+            "src": "/favicon.svg",
+            "sizes": "any",
+            "type": "image/svg+xml",
+            "purpose": "any maskable"
+        }
+    ]
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -12,7 +12,7 @@
 
     /* Language and Environment */
     "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "lib": ["DOM", "ESNext"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */