DEV Community

Hafiz Muhammad Awais
Hafiz Muhammad Awais

Posted on

Notifications Redirect Issue in Laravel FCM Web Push Notifications

Hi Community Members,

I am a facing an issue in redirection of Notifications on click event.

When I recevie the foreground notifications and I redirect to another page after receiving the notification, the notification is still in my Tray of Windows as Shown in Image
Image description

When I click on this Notfication it redirects to Base Page and does not redirect to the Page I paased in the URL.
Can any one help me where is the problem?

// Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    const messaging = firebase.messaging();

    messaging.requestPermission().then(function () {
        return messaging.getToken()
    }).then(function (response) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: `/store-token`,
            type: 'POST',
            data: {
                token: response
            },
            dataType: 'JSON',
            success: function (response) {
                if (response.response.status == true) {
                    console.info('FCM Token stored or updated.');
                }
            },
            error: function (error) {
                console.error(error);
            },
        });
    }).catch(function (error) {
        if (!sessionStorage.getItem('notificationInfoShown')) {
            toastr.info('You have blocked notifications. Please enable them to receive notifications.', 'Notification Setting', { timeOut: 5000 });
            sessionStorage.setItem('notificationInfoShown', 'true');
        }
    });`
Enter fullscreen mode Exit fullscreen mode

My onMessage Handler

// Handle incoming messages when the app is in the foreground
    messaging.onMessage((payload) => {
        // Check if 'data' and 'data' inside it are defined
        if (payload.data && payload.data.data) {
// Parse the JSON string inside the 'data' property
                const jsonData = JSON.parse(payload.data.data);
                const iconPath = firebaseConfig.appIcon;
                const baseURL = window.location.origin;

if (jsonData){

  const title = payload.notification.title;
                        const options = {
                            body: payload.notification.body,
                            icon: iconPath,
                        };

                        const notification = new Notification(title, options);

                        // Reload the page if the current page is /settings
                        if (window.location.pathname === '/settings') {
                            notification.onshow = function () {
                                window.location.href = baseURL + '/settings';
                            };
                        }

                        // Add click event listener to the notification
                        notification.onclick = function (event) {
                            event.preventDefault(); // Prevent the browser from focusing the Notification's tab
                            window.open(baseURL + `/settings`, '_blank');
                        };

}
}
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)