where I can Change FCM web notification click action url?

Question

I tried to define the url which opens when user click on notification but it continue go to url('/') only . I send the new url with payload.data but I did not know where I can define this route in the client side so it opens when user click notification .

I use laravel-notification-channels/fcm

/**
 * @param Model $notifiable
 * @return FcmMessage
 */
final public function toFcm(Model $notifiable): FcmMessage
{
    return FcmMessage::create()
        ->setData(array_merge(['type' => $this->fcmNotification->type],$this->fcmNotification->data)
        )->setNotification(\NotificationChannels\Fcm\Resources\Notification::create()
            ->setTitle($this->fcmNotification->title)
            ->setBody($this->fcmNotification->body)
            ->setImage($this->fcmNotification->image)

        ) ->setAndroid(
            AndroidConfig::create()
                ->setFcmOptions(AndroidFcmOptions::create()->setAnalyticsLabel('analytics'))
                ->setNotification(AndroidNotification::create()->setColor('#0A0A0A'))
        )->setApns(
            ApnsConfig::create()->setFcmOptions(ApnsFcmOptions::create()->setAnalyticsLabel('analytics_ios')));
}

##################### firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/7.23.0/firebase-messaging.js');

/*

firebase.initializeApp({
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxx",
    appId: "x",xxxxxxxxxxxxxxxxxxxxxxxxx
    measurementId: "xxxxxxxxxxxxxxxx"
});

 
const messaging = firebase.messaging();



messaging.setBackgroundMessageHandler(function(payload) {
    console.log(
        "[firebase-messaging-sw.js] Received background message ",
        payload,
    );
    /* Customize notification here */
    const notificationTitle = "Background Message Title";
    const notificationOptions = {
        body: "Background Message body.",
        icon: "/itwonders-web-logo.png",
    };

    return self.registration.showNotification(
        notificationTitle,
        notificationOptions,
    );
});

##################### main layout

 $(document).ready(function () {
        const firebaseConfig = {
            apiKey: "xxxxxxxxxxxxx",
            authDomain: "x",xxxxxxxxxxxxxxxxxxxx
            projectId: "xxxxxxxxxxxxxxxxxxxx",
            storageBucket: "xxxxxxxxxxxxxxxxxxxx",
            messagingSenderId: "xxxxxxxxxxxxxxxxxxxx",
            appId: "xxxxxxxxxxxxxxxxxxxx",
            measurementId: "xxxxxxxxxxxxxxxxxxxx"
        };
        firebase.initializeApp(firebaseConfig);

        const messaging = firebase.messaging();

        function initFirebaseMessagingRegistration() {
            messaging
                .requestPermission()
                .then(function () {
                    return messaging.getToken()
                })
                .then(function (token) {
                    // console.log(token);

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: '{{ theme_route('save.fcm.token')}}',
                        type: 'POST',
                        data: {
                            token: token
                        },
                        dataType: 'JSON',
                        success: function (response) {
                            console.log('Token saved successfully.');
                        },
                        error: function (err) {
                            console.log('User Token Error' + err);
                        },
                    });

                }).catch(function (err) {
                console.log('User Chat Token Error' + err);
            });
        } initFirebaseMessagingRegistration();

        messaging.onMessage(function (payload) {
            const noteTitle = payload.notification.title;

            console.log(payload.data);

             const noteOptions = {
                body: payload.notification.body,
                icon:"{{website()->logo}}" ,
                image: payload.notification.image,
              };
            new Notification(noteTitle, noteOptions);

            self.addEventListener('notificationclick', function(event) {
                event.notification.close();
                console.log('test click event');
                event.waitUntil(self.clients.openWindow('#'));
            });
        });
    });```

Answer 1

I figured that I should look for " PushEvent " : I used this two listeners to handle user clicks on FCM web push notifications, in your service worker firebase-messaging-sw.js place the following two listeners (of course change them depending on your data) :

self.addEventListener("push", (event) => {
    console.log(event);
    let response = event.data && event.data.text();
    let title = JSON.parse(response).notification.title;
    let body = JSON.parse(response).notification.body;
    let icon = JSON.parse(response).notification.image;
    let image = JSON.parse(response).notification.image;

    event.waitUntil(
        self.registration.showNotification(title, { body, icon, image, data: { url: JSON.parse(response).data.url } })
    )
});

self.addEventListener('notificationclick', function(event) {
    event.notification.close();
    event.waitUntil(
        clients.openWindow(event.notification.data.url)
    );
});