How to include a link in the HTML5 notification?

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...


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

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 :)