How to include a link in the HTML5 notification?

Question

I would like to be able to set a link/permalink to each notification, so when user clicks on it; then he is taken to the permalink location,

I've seen this answer which has a solution that's a little bit different because static link is used,

I would like to, somehow:

var noti = window.webkitNotifications.createNotification(
     'http://funcook.com/img/favicon.png', 
     'HTML5 Notification', 
     'HTML5 Notification content...',
     'http://mycustom.dynamic.link.com/'    /* invented code */
)
noti.onclose = function(){ alert(':(') };
noti.onclick = function(){ 
    window.location.href = $(this).url; /* invented code */
};
noti.show();

Any chance? (I really don't like the static html file solution... I would like to keep this syntax)

You seem to be missing some code; you have a `} else {` that doesn't have an `if () {` in front of it. — DiMono, Sep 07 '13 at 03:10
Thanks edited it, it wasn't relevant for the question (it was requesting permissions if not granted yet) — Toni Michel Caubet, Sep 07 '13 at 13:08

Jasper N. Brouwer · Accepted Answer · 2013-09-12T08:39:31.417

How about something like this?

var createNotificationWithLink = function(image, title, content, link) {
    var notification = window.webkitNotifications.createNotification(image, title, content);

    notification.onclose = function() {
        alert(':(');
    };

    notification.onclick = function() { 
        window.location.href = link;
    };

    return notification;
};

Now you can call createNotificationWithLink whenever you want to create a notification:

var noti = createNotificationWithLink(
    'http://funcook.com/img/favicon.png',
    'HTML5 Notification',
    'HTML5 Notification content...',
    'http://mycustom.dynamic.link.com/'
);

noti.show();

You can also move noti.show(); into the createNotificationWithLink function if you like (notification.show();). I don't know if you want the notification to be shown automatically when you create it...

score 5 · Answer 2 · answered Jun 08 '15 at 14:38

You can pass a data property that you can read from within the onclick event handler as e.target.data.

var notification = new window.Notification("Hello!",
{
    body: "Hello world!",
    data: "https://www.example.com/?id=" + 123
});

notification.onclick = function(e) {
    window.location.href = e.target.data;
}

electrikmilk · Answer 3 · 2013-09-10T15:13:19.520

noti.onclick = function() {
    window.open("http://www.stackoverflow.com")
};

More on how to use window.open: http://www.w3schools.com/jsref/met_win_open.asp4

HTML5 Notification Resource: http://www.html5rocks.com/en/tutorials/notifications/quick/ (If this doesn't answer you're question)

For Each one you could have:

var noti1 = window.webkitNotifications.createNotification(
     'http://funcook.com/img/favicon.png', 
     'HTML5 Notification', 
     'HTML5 Notification content...',

var noti2 = window.webkitNotifications.createNotification(
     'http://funcook.com/img/favicon.png', 
     'HTML5 Notification #2', 
     'HTML5 Notification #2 content...',

etc

and then

noti1.onclick = function() {
    window.open("http://www.stackoverflow.com")
};
noti2.onclick = function() {
    window.open("http://www.example.com")
};

hope that helps :)

Not really... because the plan is to each notification to have its own url.. so the url needs to be attached to the notification — Toni Michel Caubet, Sep 10 '13 at 13:32
Thank your for your answer, unfortunatelly this stills too static; imagine I am delivering one notification per post and per user... how can I track the links? — Toni Michel Caubet, Sep 10 '13 at 17:42

logic8 · Answer 4 · 2013-09-11T03:23:46.107

0

You can add the url as a property to 'noti', then call that property with this.yourpropertyname

example:

noti.myurl = 'http://stackoverflow.com';

...

noti.onclick = function(){ 
    window.location.href = this.myurl;
};

hope this helps.

edited Sep 11 '13 at 03:23

answered Sep 10 '13 at 21:59

logic8

874
9
21

The problem is when you have multiple notifications and they have different URLs and they all reference the same variable. – Fred Jun 08 '15 at 14:25
@Fred not if it's oop -- the property would be specific to the 'noti' that it was added to. The chosen answer is essentially the same as my suggestion, but more coherent. – logic8 Jul 18 '15 at 01:54

score 0 · Answer 5 · answered Feb 15 '19 at 08:07

For anyone, who needs to open a new browser window(tab), but does not want the parent window(tab) to be replaced and focused upon notification click, this code snippet will do the trick:

 var notification = new window.Notification("Hello!", {
   body: "Hello world!",
   data: "https://www.google.com/"
 });

 notification.onclick = function(event) {
          event.preventDefault();  //prevent the browser from focusing the Notification's tab, while it stays also open        
          var new_window = window.open('','_blank'); //open empty window(tab)
          new_window.location = event.target.data; //set url of newly created window(tab) and focus

        };

why not `var new_window = window.open(event.target.data, '_blank');` ? — Toni Michel Caubet, Feb 15 '19 at 17:56

How to include a link in the HTML5 notification?

5 Answers5