feat: ✨ ios notifications

ios/src/ZotMeet/AppDelegate.swift

@@ -11,8 +11,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
     func application(_ application: UIApplication,
                        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
 
-// TODO: if we're using Firebase, uncomment next string
-        //FirebaseApp.configure()
+        FirebaseApp.configure()
 
         // [START set_messaging_delegate]
         Messaging.messaging().delegate = self

ios/src/ZotMeet/ViewController.swift

@@ -228,9 +228,6 @@ extension ViewController: WKScriptMessageHandler {
         if message.name == "print" {
             printView(webView: ZotMeet.webView)
         }
-        if message.name == "push-subscribe" {
-            handleSubscribeTouch(message: message)
-        }
         if message.name == "push-permission-request" {
             handlePushPermission()
         }

ios/src/ZotMeet/WebView.swift

@@ -10,7 +10,6 @@ func createWebView(container: UIView, WKSMH: WKScriptMessageHandler, WKND: WKNav
     let userContentController = WKUserContentController()
 
     userContentController.add(WKSMH, name: "print")
-    userContentController.add(WKSMH, name: "push-subscribe")
     userContentController.add(WKSMH, name: "push-permission-request")
     userContentController.add(WKSMH, name: "push-permission-state")
     userContentController.add(WKSMH, name: "push-token")

package.json

@@ -51,6 +51,7 @@
 		"date-fns": "^4.1.0",
 		"date-fns-tz": "^3.2.0",
 		"dotenv": "^16.4.5",
+		"firebase-admin": "^13.10.0",
 		"googleapis": "^148.0.0",
 		"lucide-react": "^0.453.0",
 		"next": "16.1.1",

public/sw-register.js

@@ -28,4 +28,22 @@
 		.catch((err) => {
 			console.warn("[sw] registration failed", err);
 		});
+
+	function getSameOriginRedirect(value) {
+		if (typeof value !== "string") return "/summary";
+
+		try {
+			const url = new URL(value, window.location.origin);
+			if (url.origin !== window.location.origin) return "/summary";
+			return url.pathname + url.search + url.hash;
+		} catch (_err) {
+			return "/summary";
+		}
+	}
+
+	navigator.serviceWorker.addEventListener("message", (event) => {
+		if (event.data && event.data.type === "notification-click") {
+			window.location.assign(getSameOriginRedirect(event.data.redirect));
+		}
+	});
 })();

public/sw.js

@@ -153,3 +153,76 @@ self.addEventListener("message", (event) => {
 		self.skipWaiting();
 	}
 });
+
+function getPushPayload(event) {
+	if (!event.data) {
+		return {
+			title: "ZotMeet",
+			message: "You have a new notification.",
+			redirect: "/summary",
+		};
+	}
+
+	try {
+		return event.data.json();
+	} catch (_err) {
+		return {
+			title: "ZotMeet",
+			message: event.data.text(),
+			redirect: "/summary",
+		};
+	}
+}
+
+function getSameOriginRedirect(value) {
+	if (typeof value !== "string") return "/summary";
+
+	try {
+		const url = new URL(value, self.location.origin);
+		if (url.origin !== self.location.origin) return "/summary";
+		return `${url.pathname}${url.search}${url.hash}`;
+	} catch (_err) {
+		return "/summary";
+	}
+}
+
+self.addEventListener("push", (event) => {
+	const payload = getPushPayload(event);
+	const title = payload.title || "ZotMeet";
+	const redirect = getSameOriginRedirect(payload.redirect || payload.url);
+
+	event.waitUntil(
+		self.registration.showNotification(title, {
+			body: payload.message || payload.body || "You have a new notification.",
+			icon: "/icons/icon-192.png",
+			badge: "/icons/icon-96.png",
+			data: { redirect },
+		}),
+	);
+});
+
+self.addEventListener("notificationclick", (event) => {
+	event.notification.close();
+
+	const redirect = getSameOriginRedirect(event.notification.data?.redirect);
+	const targetUrl = new URL(redirect, self.location.origin).href;
+
+	event.waitUntil(
+		(async () => {
+			const clientList = await clients.matchAll({
+				type: "window",
+				includeUncontrolled: true,
+			});
+
+			for (const client of clientList) {
+				if (new URL(client.url).origin === self.location.origin) {
+					await client.focus();
+					client.postMessage({ type: "notification-click", redirect });
+					return;
+				}
+			}
+
+			await clients.openWindow(targetUrl);
+		})(),
+	);
+});

src/app/api/push-subscriptions/route.ts

@@ -0,0 +1,86 @@
+import { and, eq } from "drizzle-orm";
+import { NextResponse } from "next/server";
+import { db } from "@/db";
+import { pushSubscriptions } from "@/db/schema";
+import { getCurrentSession } from "@/lib/auth";
+
+type PushSubscriptionPayload = {
+	endpoint?: unknown;
+	keys?: {
+		p256dh?: unknown;
+		auth?: unknown;
+	};
+};
+
+function isValidSubscriptionPayload(
+	payload: PushSubscriptionPayload,
+): payload is {
+	endpoint: string;
+	keys: { p256dh: string; auth: string };
+} {
+	return (
+		typeof payload.endpoint === "string" &&
+		typeof payload.keys?.p256dh === "string" &&
+		typeof payload.keys.auth === "string"
+	);
+}
+
+export async function POST(request: Request) {
+	const { user } = await getCurrentSession();
+	if (!user) {
+		return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+	}
+
+	const payload = (await request.json()) as PushSubscriptionPayload;
+	if (!isValidSubscriptionPayload(payload)) {
+		return NextResponse.json(
+			{ error: "Invalid push subscription" },
+			{ status: 400 },
+		);
+	}
+
+	await db
+		.insert(pushSubscriptions)
+		.values({
+			userId: user.id,
+			endpoint: payload.endpoint,
+			p256dh: payload.keys.p256dh,
+			auth: payload.keys.auth,
+			userAgent: request.headers.get("user-agent"),
+		})
+		.onConflictDoUpdate({
+			target: pushSubscriptions.endpoint,
+			set: {
+				userId: user.id,
+				p256dh: payload.keys.p256dh,
+				auth: payload.keys.auth,
+				userAgent: request.headers.get("user-agent"),
+				updatedAt: new Date(),
+			},
+		});
+
+	return NextResponse.json({ success: true });
+}
+
+export async function DELETE(request: Request) {
+	const { user } = await getCurrentSession();
+	if (!user) {
+		return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+	}
+
+	const payload = (await request.json()) as { endpoint?: unknown };
+	if (typeof payload.endpoint !== "string") {
+		return NextResponse.json({ error: "Invalid endpoint" }, { status: 400 });
+	}
+
+	await db
+		.delete(pushSubscriptions)
+		.where(
+			and(
+				eq(pushSubscriptions.endpoint, payload.endpoint),
+				eq(pushSubscriptions.userId, user.id),
+			),
+		);
+
+	return NextResponse.json({ success: true });
+}

src/app/api/push-tokens/route.ts

@@ -0,0 +1,78 @@
+import { and, eq } from "drizzle-orm";
+import { NextResponse } from "next/server";
+import { db } from "@/db";
+import { nativePushTokens } from "@/db/schema";
+import { getCurrentSession } from "@/lib/auth";
+
+type PushTokenPayload = {
+	token?: unknown;
+	platform?: unknown;
+};
+
+function getValidToken(payload: PushTokenPayload) {
+	if (typeof payload.token !== "string") return null;
+
+	const token = payload.token.trim();
+	if (!token || token === "ERROR GET TOKEN") return null;
+
+	return token;
+}
+
+export async function POST(request: Request) {
+	const { user } = await getCurrentSession();
+	if (!user) {
+		return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+	}
+
+	const payload = (await request.json()) as PushTokenPayload;
+	const token = getValidToken(payload);
+	if (!token) {
+		return NextResponse.json({ error: "Invalid push token" }, { status: 400 });
+	}
+
+	const platform = payload.platform === "ios" ? "ios" : "unknown";
+
+	await db
+		.insert(nativePushTokens)
+		.values({
+			userId: user.id,
+			token,
+			platform,
+			userAgent: request.headers.get("user-agent"),
+		})
+		.onConflictDoUpdate({
+			target: nativePushTokens.token,
+			set: {
+				userId: user.id,
+				platform,
+				userAgent: request.headers.get("user-agent"),
+				updatedAt: new Date(),
+			},
+		});
+
+	return NextResponse.json({ success: true });
+}
+
+export async function DELETE(request: Request) {
+	const { user } = await getCurrentSession();
+	if (!user) {
+		return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+	}
+
+	const payload = (await request.json()) as PushTokenPayload;
+	const token = getValidToken(payload);
+	if (!token) {
+		return NextResponse.json({ error: "Invalid push token" }, { status: 400 });
+	}
+
+	await db
+		.delete(nativePushTokens)
+		.where(
+			and(
+				eq(nativePushTokens.token, token),
+				eq(nativePushTokens.userId, user.id),
+			),
+		);
+
+	return NextResponse.json({ success: true });
+}

src/components/nav/mui-app-shell.tsx

@@ -2,6 +2,7 @@
 
 import { Box, useMediaQuery, useTheme } from "@mui/material";
 import { usePathname } from "next/navigation";
+import { NativeIosPushBridge } from "@/components/push/native-ios-push-bridge";
 import type { NotificationItem, UserProfile } from "@/lib/auth/user";
 import { MuiBottomNav } from "./mui-bottom-nav";
 import { MuiTopNav } from "./mui-top-nav";
@@ -37,6 +38,7 @@ export function MuiAppShell({
 				minHeight: "100vh",
 			}}
 		>
+			{user ? <NativeIosPushBridge userId={user.id} /> : null}
 			{!isMobile && <MuiTopNav user={user} notifications={notifications} />}
 			<Box
 				sx={{

src/components/profile/notifications-panel.tsx

@@ -6,6 +6,7 @@ import Stack from "@mui/material/Stack";
 import Switch from "@mui/material/Switch";
 import Typography from "@mui/material/Typography";
 import { useState, useTransition } from "react";
+import { WebPushPermissionButton } from "@/components/push/web-push-permission-button";
 import { useSnackbar } from "@/components/ui/snackbar-provider";
 import {
 	NOTIFICATION_PREF_OPTIONS,
@@ -56,6 +57,7 @@ export function NotificationsPanel({
 			<Typography variant="h5">Notifications</Typography>
 
 			<Stack spacing={0}>
+				<WebPushPermissionButton />
 				{NOTIFICATION_PREF_OPTIONS.map((option) => (
 					<Box
 						key={option.key}