Function useWebpushNotifications

site/src/contexts/useWebpushNotifications.ts:16–121

()

}

export const useWebpushNotifications = (): WebpushNotifications => {
	const { metadata } = useEmbeddedMetadata();
	const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
	const [subscribed, setSubscribed] = useState<boolean>(false);
	const [loading, setLoading] = useState<boolean>(true);
	const enabled =
		"Notification" in window &&
		"serviceWorker" in navigator &&
		!!buildInfoQuery.data?.webpush_public_key;

	useEffect(() => {
		// Check if browser supports push notifications
		if (!("Notification" in window) || !("serviceWorker" in navigator)) {
			setSubscribed(false);
			setLoading(false);
			return;
		}

		const checkSubscription = async () => {
			try {
				const registration = await navigator.serviceWorker.ready;
				const subscription = await registration.pushManager.getSubscription();
				setSubscribed(Boolean(subscription));
			} catch (error) {
				console.error("Error checking push subscription:", error);
				setSubscribed(false);
			} finally {
				setLoading(false);
			}
		};

		checkSubscription();
	}, []);

	const subscribe = async (): Promise<void> => {
		try {
			setLoading(true);

			// Explicitly request notification permission before subscribing
			// to the push manager. Without this, pushManager.subscribe()
			// throws a generic "Registration failed - permission denied"
			// DOMException when the permission state is "denied", which
			// gives no opportunity to show a clear message to the user.
			const permission = await Notification.requestPermission();
			if (permission !== "granted") {
				throw new Error(
					"Notifications are blocked by your browser. Please allow notifications for this site in your browser settings.",
				);
			}

			const registration = await navigator.serviceWorker.ready;
			const vapidPublicKey = buildInfoQuery.data?.webpush_public_key;

			const subscription = await registration.pushManager.subscribe({
				userVisibleOnly: true,
				applicationServerKey: vapidPublicKey,
			});
			const json = subscription.toJSON();