d
Amit DhamuSoftware Engineer
 

HTML5 Desktop Notifications

2 minute read 00000 views
<!-- Text Notification -->
<a id="showNotification" href="javascript:void(0);">Plain Text Notification</a>
<!-- HTML Notification -->
<a id="showHTMLNotification" href="javascript:void(0);">HTML Notification</a>
$('#showNotification').on('click', function () {
  Notification('Title', 'Description', 'text')
})

$('#showHTMLNotification').click(function () {
  Notification('', 'https://www.google.co.uk', 'html')
})
function Notification(title, content, type) {
  if (!window.webkitNotifications) {
    /* Don't do anything. This browser does not support desktop notifications */
  } else {
    if (window.webkitNotifications.checkPermission() == 0) {
      switch (type) {
        case 'text':
          var notify = window.webkitNotifications.createNotification(
            'icon.png',
            title,
            content
          )
          break
        case 'html':
          var notify =
            window.webkitNotifications.createHTMLNotification(content)
          break
      }

      notify.show()

      /* Timeout Notification Display (optional) */
      setTimeout(function () {
        notify.cancel()
      }, '15000')
    } else {
      window.webkitNotifications.requestPermission()
    }
  }
}