How to include link in HTML5 notification?

Question

I would like to be able to set a link / permalink for each notification, so when the user clicks on it; then it gets into a permalink,

I saw this answer that has a solution that is slightly different than using a static link,

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

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

Answer 1

How about something like that?

 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 want ( notification.show(); ). I do not know if you want the notification to be automatically displayed when it is created ...

Answer 2

 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 does not answer your question)

For each of them you can:

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

Answer 3

You can pass the data property, which you can read from 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; } 

Answer 4

You can add the URL as the “noti” property, then call this property with this.yourpropertyname

Example:

 noti.myurl = 'http://stackoverflow.com'; ... noti.onclick = function(){ window.location.href = this.myurl; }; 

hope this helps.

Answer 5

 How do I make this design when the Nephrection logo appears when anyone who presses the notification appears to move to the link that is being placed manually 

  var notificationsEnabled = false; function initNotifications() { if (window.Notification) { Notification.requestPermission(function(permission) { if (permission === 'granted') { notificationsEnabled = true; } else { alert("You denied Notifications, it so sad :("); } }); } else { alert("Your browser doesn't support Notifications API"); } } function showNotification() { if (notificationsEnabled) { var notification = new Notification("SSaurel", { body : 'You clicked on the button !', icon : 'https://www.ssaurel.com/cryptocoins/screenshots/web_hi_res_512.png' }); setTimeout(function() { notification.close(); }, 6000); } else { alert("Notifications are disabled"); } } 

  button { display : block; margin : 0 auto; margin-top : 200px; padding : 16px 20px; border : none; background : #2B3542; color : #FFF; border-radius : 30px; font-weight : bold; font-size : 20px; } button:hover { background : red; cursor : pointer; } 

 <html> <head> <title>Notifications in HTML5 with SSaurel</title> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body onload="initNotifications()"> <button onclick="showNotification()">Show Notification</button> </body> </html>