Convert to PWA + add service worker (#301)

aster-void · web-flow · commit f89b3b8f2a23 · 2025-05-19T21:32:46.000+09:00
diff --git a/bun.lock b/bun.lock
diff --git a/server/index.ts b/server/index.ts
@@ -10,6 +10,7 @@ import communityRouter from "./routes/community.ts";
 import divisionRouter from "./routes/division.ts";
 import imageRouter from "./routes/image.ts";
 import languageRouter from "./routes/language.ts";
+import pushRouter from "./routes/push.ts";
 import universityRouter from "./routes/university.ts";
 import usersRouter from "./routes/users/index.ts";
 
@@ -57,6 +58,7 @@ const app = new Hono()
   .route("/language", languageRouter)
   .route("/university", universityRouter)
   .route("/chat", chatRouter)
+  .route("/push", pushRouter)
   .route("/image", imageRouter);
 
 export default app;
diff --git a/server/package.json b/server/package.json
@@ -21,10 +21,12 @@
     "devalue": "^5.1.1",
     "firebase-admin": "^13.1.0",
     "hono": "^4.7.1",
+    "web-push": "^3.6.7",
     "zod": "^3.24.2"
   },
   "devDependencies": {
     "@types/bun": "^1.2.4",
+    "@types/web-push": "^3.6.4",
     "prisma": "^6.3.1",
     "typescript": "^5.7.3"
   },
diff --git a/server/routes/push.ts b/server/routes/push.ts
@@ -0,0 +1,12 @@
+import { Hono } from "hono";
+import webpush from "web-push";
+
+const vapidKeys = webpush.generateVAPIDKeys();
+
+export function publish() {
+  "todo";
+}
+const route = new Hono().get("/pub_key", async (c) => {
+  return c.json({ pubkey: vapidKeys.publicKey });
+});
+export default route;
diff --git a/web/public/icon-100x-to-192x.png b/web/public/icon-100x-to-192x.png
diff --git a/web/public/icon-100x-to-512x.png b/web/public/icon-100x-to-512x.png
diff --git a/web/public/icon.png b/web/public/icon.png
diff --git a/web/public/manifest.webmanifest b/web/public/manifest.webmanifest
@@ -0,0 +1,22 @@
+{
+  "name": "UT-Bridge",
+  "short_name": "UT-Bridge",
+  "start_url": "/community",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#ffffff",
+  "icons": [
+    {
+      "src": "/icon-100x-to-192x.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icon-100x-to-512x.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}
diff --git a/web/public/service-worker.js b/web/public/service-worker.js
@@ -0,0 +1,11 @@
+// @ts-check
+/// <reference lib="dom" />
+
+self.addEventListener("activate", (ev) => {
+  try {
+    console.log("ServiceWorker activated");
+  } catch {}
+
+  // @ts-expect-error
+  ev.waitUntil(self.clients.claim());
+});
diff --git a/web/src/app/[locale]/layout.tsx b/web/src/app/[locale]/layout.tsx
@@ -1,9 +1,12 @@
 import { routing } from "@/i18n/routing";
 import "../../tailwind.css";
+import { ServiceWorkerProvider } from "@/features/push/provider";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages } from "next-intl/server";
 import { notFound } from "next/navigation";
+
 export const runtime = "edge";
+
 export default async function RootLayout({
   children,
   params,
@@ -15,6 +18,7 @@ export default async function RootLayout({
   if (!routing.locales.includes(locale as "ja" | "en")) {
     notFound();
   }
+
   // Providing all messages to the client
   // side is the easiest way to get started
   const messages = await getMessages();
@@ -23,10 +27,13 @@ export default async function RootLayout({
       <head>
         <meta charSet="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="manifest" href="/manifest.webmanifest" crossOrigin="use-credentials" />
         <title>ut-bridge</title>
       </head>
       <body className="flex h-screen flex-col overflow-y-auto">
-        <NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>
+        <ServiceWorkerProvider>
+          <NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>
+        </ServiceWorkerProvider>
       </body>
     </html>
   );
diff --git a/web/src/features/push/context-definition.ts b/web/src/features/push/context-definition.ts
@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const ServiceWorkerContext = createContext<ServiceWorkerRegistration | undefined>(undefined);
diff --git a/web/src/features/push/provider.tsx b/web/src/features/push/provider.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ServiceWorkerContext } from "./context-definition.ts";
+
+export function ServiceWorkerProvider({ children }: { children: React.ReactNode }) {
+  const [sw, setSW] = useState<ServiceWorkerRegistration>();
+  useEffect(() => {
+    navigator.serviceWorker?.register("/service-worker.js").then((sw) => {
+      setSW(sw);
+    });
+  }, []);
+  return <ServiceWorkerContext.Provider value={sw}>{children}</ServiceWorkerContext.Provider>;
+}
diff --git a/web/src/features/push/useServiceWorker.ts b/web/src/features/push/useServiceWorker.ts
@@ -0,0 +1,30 @@
+import { client } from "@/client.ts";
+import { useContext, useEffect } from "react";
+import { ServiceWorkerContext } from "./context-definition.ts";
+
+export function useServiceWorkerRegistration() {
+  const sw = useContext(ServiceWorkerContext);
+  useEffect(() => {
+    console.log("[service worker] set up to be", sw);
+  }, [sw]);
+  return sw;
+}
+
+export function usePushControl() {
+  const sw = useServiceWorkerRegistration();
+  return {
+    async setupPushNotification() {
+      const res = await client.push.pub_key.$get();
+      const publicKey = (await res.json()).pubkey;
+      const options: PushSubscriptionOptionsInit = {
+        applicationServerKey: publicKey,
+        userVisibleOnly: true,
+      };
+      if (!sw) {
+        console.warn("[push control] sw not found!");
+        return;
+      }
+      sw.pushManager.subscribe(options);
+    },
+  };
+}
