hossein-por-shop/frontend/composables/global/usePushNotifications.ts

// composables/usePushNotifications.ts
import { useLocalStorage, usePermission } from "@vueuse/core";
import { onMounted, ref } from "vue";
import useSubscribeNotification from "../api/notifications/useSubscribeNotification";

interface VapidKeys {
    publicKey: string;
}

export const usePushNotifications = () => {
    const isSupported = ref(false);
    const permission = usePermission("notifications");
    const subscription = useLocalStorage<PushSubscriptionJSON | null>(
        "push-subscription",
        null
    );
    const vapid = ref<VapidKeys | null>(null);

    const { mutateAsync: subscribeNotification } = useSubscribeNotification();
    const toast = useToast();

    // Only run in client-side
    onMounted(async () => {
        if (typeof window !== "undefined" && "serviceWorker" in navigator) {
            isSupported.value = true;
            vapid.value = await $fetch("/api/vapid");
        }
    });

    const subscribe = async () => {
        if (!isSupported.value || !vapid.value?.publicKey) {
            throw new Error("Push notifications not supported");
        }

        const swRegistration = await navigator.serviceWorker.ready;

        const applicationServerKey = vapid.value.publicKey
            .replace(/-/g, "+")
            .replace(/_/g, "/");

        const convertedKey = Uint8Array.from(atob(applicationServerKey), (c) =>
            c.charCodeAt(0)
        );

        const pushSubscription = await swRegistration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: convertedKey,
        });

        const subscriptionJson = pushSubscription.toJSON();

        subscribeNotification({
            body: subscriptionJson,
        });

        subscription.value = subscriptionJson;
    };

    return {
        isSupported,
        permission,
        subscribe,
        subscription,
    };
};