feat: just got notifications to work

Author: scriptcoded

.gitignore

@@ -29,3 +29,5 @@ dev-dist
 .env
 .env.*
 !.env.example
+
+.j26

.j26.local.yaml

@@ -0,0 +1,12 @@
+services:
+  auth:
+    mode: docker
+    env:
+      PUBLIC_URL: https://local.j26.se/auth
+      ALLOWED_REDIRECT_DOMAINS: local.j26.se
+      OIDC_SERVER: https://dev.id.scouterna.se/realms/jamboree26
+      OIDC_CLIENT_ID: j26-auth-local
+      OIDC_CLIENT_SECRET: nFpewcBpLbdwSdcg42zpEDu6omS31u03
+  app:
+    mode: local
+    hostPort: 5173

src/routes/_app.tsx

@@ -5,6 +5,8 @@ import {
   useRouter,
   useRouterState,
 } from "@tanstack/react-router";
+import { initializeApp } from "firebase/app";
+import { getMessaging, getToken, onMessage } from "firebase/messaging";
 import { useAtomValue, useSetAtom } from "jotai";
 import { Suspense, useEffect } from "react";
 import { AppBar } from "../components/AppBar";
@@ -13,9 +15,13 @@ import { DevBanner } from "../components/DevBanner";
 import { InstallBanner } from "../components/InstallBanner";
 import { SideMenu } from "../components/menu/SideMenu";
 import { PwaReloadBanner } from "../components/PwaReloadBanner";
+
 import { onboardedAtom } from "../onboarding";
 import { pageTitleAtom } from "../pageState";
 
+const FIREBASE_CONFIG = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIG);
+const FIREBASE_VAPID_KEY = import.meta.env.VITE_FIREBASE_VAPID_KEY;
+
 export const Route = createFileRoute("/_app")({
   component: RouteComponent,
 });
@@ -51,6 +57,55 @@ function RouteComponent() {
     },
   });
 
+  useEffect(() => {
+    navigator.serviceWorker.ready.then((registration) => {
+      const firebaseApp = initializeApp(FIREBASE_CONFIG);
+      const messaging = getMessaging(firebaseApp);
+
+      getToken(messaging, {
+        vapidKey: FIREBASE_VAPID_KEY,
+        serviceWorkerRegistration: registration,
+      })
+        .then((token) => {
+          console.log("FCM token:", token);
+
+          onMessage(messaging, (payload) => {
+            console.log("Foreground message received:", payload);
+
+            registration.showNotification(
+              payload.notification?.title || "Notification",
+              {
+                body: payload.notification?.body,
+              },
+            );
+          });
+
+          fetch("/notifications/api/tenants/jamboree26/register", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ tokens: [token] }),
+          })
+            .then((res) => {
+              if (!res.ok) {
+                throw new Error(
+                  `Failed to register FCM token: ${res.statusText}`,
+                );
+              }
+
+              console.log("FCM token registered with backend");
+            })
+            .catch((e) => {
+              console.error("Failed to register FCM token with backend:", e);
+            });
+        })
+        .catch((e) => {
+          console.error("Failed to get FCM token:", e);
+        });
+    });
+  }, []);
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run on load
   useEffect(() => {
     if (!onboarded) {

src/sw/sw.ts

@@ -1,3 +1,5 @@
+import { initializeApp } from "firebase/app";
+import { getMessaging, onBackgroundMessage } from "firebase/messaging/sw";
 import { CacheableResponsePlugin } from "workbox-cacheable-response";
 import { cleanupOutdatedCaches, precacheAndRoute } from "workbox-precaching";
 import { Route, registerRoute } from "workbox-routing";
@@ -10,9 +12,28 @@ import {
 declare let self: ServiceWorkerGlobalScope;
 
 import { ExpirationPlugin } from "workbox-expiration";
-
 import { osmTilesRoute } from "./sw-osm-tiles";
 
+const FIREBASE_CONFIG = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIG);
+
+const firebaseApp = initializeApp(FIREBASE_CONFIG);
+const messaging = getMessaging(firebaseApp);
+
+onBackgroundMessage(messaging, (payload) => {
+  console.log("Background message received:", payload);
+
+  self.registration
+    .showNotification(payload.notification?.title || "Notification", {
+      body: payload.notification?.body,
+    })
+    .then(() => {
+      console.log("Notification shown successfully");
+    })
+    .catch((e) => {
+      console.error("Failed to show notification:", e);
+    });
+});
+
 cleanupOutdatedCaches();
 
 precacheAndRoute(self.__WB_MANIFEST);

vite.config.ts

@@ -61,7 +61,8 @@ export default defineConfig(() => {
         injectRegister: "script",
         strategies: "injectManifest",
         devOptions: {
-          // enabled: true,
+          enabled: true,
+          type: "module",
         },
         srcDir: "src/sw",
         filename: "sw.ts",