where I can Change FCM web notification click action url? - laravel

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)
);
});