push notifications but installable to home screen yet

app/features/core/hooks/use-app-loader-data.ts

@@ -0,0 +1,13 @@
+import { useMatches } from "@remix-run/react";
+
+import type { AppLoaderData } from "~/routes/__app";
+
+export default function useAppLoaderData() {
+	const matches = useMatches();
+	const __appRoute = matches.find((match) => match.id === "routes/__app");
+	if (!__appRoute) {
+		throw new Error("useSession hook called outside _app route");
+	}
+
+	return __appRoute.data as AppLoaderData;
+}

app/features/core/hooks/use-notifications.client.ts

@@ -0,0 +1,90 @@
+import { useEffect, useMemo, useState } from "react";
+import { useFetcher } from "@remix-run/react";
+
+import useAppLoaderData from "~/features/core/hooks/use-app-loader-data";
+
+export default function useNotifications() {
+	const isServiceWorkerSupported = useMemo(() => "serviceWorker" in navigator, []);
+	const [subscription, setSubscription] = useState<PushSubscription | null>(null);
+	const { webPushPublicKey } = useAppLoaderData().config;
+	const fetcher = useFetcher();
+	const subscribeToNotifications = (subscription: PushSubscriptionJSON) => {
+		fetcher.submit(
+			{
+				_action: "subscribe",
+				subscription: JSON.stringify(subscription),
+			},
+			{ method: "post", action: "/notifications-subscription" },
+		);
+	};
+	const unsubscribeFromNotifications = (subscriptionEndpoint: PushSubscription["endpoint"]) => {
+		fetcher.submit(
+			{
+				_action: "unsubscribe",
+				subscriptionEndpoint,
+			},
+			{ method: "post", action: "/notifications-subscription" },
+		);
+	};
+
+	useEffect(() => {
+		(async () => {
+			if (!isServiceWorkerSupported) {
+				return;
+			}
+
+			const registration = await navigator.serviceWorker.ready;
+			const subscription = await registration.pushManager.getSubscription();
+			setSubscription(subscription);
+		})();
+	}, [isServiceWorkerSupported]);
+
+	async function subscribe() {
+		if (!isServiceWorkerSupported || subscription !== null || fetcher.state !== "idle") {
+			return;
+		}
+
+		const registration = await navigator.serviceWorker.ready;
+		const newSubscription = await registration.pushManager.subscribe({
+			userVisibleOnly: true,
+			applicationServerKey: urlBase64ToUint8Array(webPushPublicKey),
+		});
+		setSubscription(newSubscription);
+		subscribeToNotifications(newSubscription.toJSON());
+	}
+
+	async function unsubscribe() {
+		if (!isServiceWorkerSupported || !subscription || fetcher.state !== "idle") {
+			return;
+		}
+
+		subscription
+			.unsubscribe()
+			.then(() => {
+				console.log("Unsubscribed from notifications");
+				setSubscription(null);
+			})
+			.catch((error) => console.error("Failed to unsubscribe from notifications", error));
+		unsubscribeFromNotifications(subscription.endpoint);
+	}
+
+	return {
+		isServiceWorkerSupported,
+		subscription,
+		subscribe,
+		unsubscribe,
+	};
+}
+
+function urlBase64ToUint8Array(base64String: string) {
+	const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+	const base64 = (base64String + padding).replace(/\-/g, "+").replace(/_/g, "/");
+
+	const rawData = window.atob(base64);
+	const outputArray = new Uint8Array(rawData.length);
+
+	for (let i = 0; i < rawData.length; ++i) {
+		outputArray[i] = rawData.charCodeAt(i);
+	}
+	return outputArray;
+}

app/features/core/hooks/use-session.ts

@@ -1,13 +1,5 @@
-import { useMatches } from "@remix-run/react";
-
-import type { SessionData } from "~/utils/auth.server";
+import useAppLoaderData from "~/features/core/hooks/use-app-loader-data";
 
 export default function useSession() {
-	const matches = useMatches();
-	const __appRoute = matches.find((match) => match.id === "routes/__app");
-	if (!__appRoute) {
-		throw new Error("useSession hook called outside _app route");
-	}
-
-	return __appRoute.data as SessionData;
+	return useAppLoaderData().sessionData;
 }