Chrome Push Notification - How To Open Url Adress After Click?

I am new to Google Chrome Push notifications and I was just reading some questions and answers here, on stackoverflow and I have ended with this easy push notification javascript.

Solution 1:

I am guessing you are in a Service Worker context, because that's where Push Notifications are received. So you have the self object to add a event listener to, that will react to a click on the notification.

self.addEventListener('notificationclick', function(event) {
    let url = 'https://example.com/some-path/';
    event.notification.close(); // Android needs explicit close.event.waitUntil(
        clients.matchAll({type: 'window'}).then( windowClients => {
            // Check if there is already a window/tab open with the target URLfor (var i = 0; i < windowClients.length; i++) {
                var client = windowClients[i];
                // If so, just focus it.if (client.url === url && 'focus'in client) {
                    return client.focus();
                }
            }
            // If not, then open the target URL in a new window/tab.if (clients.openWindow) {
                return clients.openWindow(url);
            }
        })
    );
});

Solution 2:

If you want to open website with dynamic URL received from FCM push notification or any other web push notification then

BELOW IS AN EXAMPLE OF SERVICE WORKER USED FOR FCM PUSH NOTIFICATION

messaging.setBackgroundMessageHandler(function(payload) {

    console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification herevar notificationTitle = payload.data.title; //or payload.notification or whatever your payload isvar notificationOptions = {
    body: payload.data.body,
    icon: payload.data.icon,
    data: { url:payload.data.click_action }, //the url which we gonna use later
    actions: [{action: "open_url", title: "Read Now"}]
  };

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

and handle click event with below code

self.addEventListener('notificationclick', function(event) {

  switch(event.action){
    case'open_url':
    clients.openWindow(event.notification.data.url); //which we got from abovebreak;
    case'any_other_action':
    clients.openWindow("https://www.example.com");
    break;
  }
}
, false);

Hope it helps!

Solution 3:

(This code refers to firebase messaging) I was also searching for a soluting and the answer was very easy, but there was no doc saying it clearly. You need to put "click_action" = "your url" inside the notification json. Here is an example:

notification: {
          title: "Come",
          icon: '../../../../assets/logo.png',
          vibrate: [300,100,400,100,400,100,400],
          body: "some text",
          click_action : "your link"
         }

Hope it helps.

Solution 4:

{

 "notification": {

   "title": "Hey there",

   "body": "Subscribe to might ghost hack youtube channel",

   "click_action" : "http://localhost:4200"

 },

 "to":"YOUR_TOKEN"

}

This worked for me

"@angular/fire": "^6.1.5",

"firebase":"^7.0 || ^8.0"