How to include a link in the HTML5 notification?

Toni Michel Caubet picture Toni Michel Caubet · Sep 2, 2013 · Viewed 11.5k times · Source

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)

Answer

Jasper N. Brouwer picture Jasper N. Brouwer · Sep 11, 2013

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