html5 notifications TEXT

by secretgspot

HTML

<p>  
  <button id="request_permission" href="#">Set notification permissions for this page</button> 
  <span>Note: Use this button if you also want to <em>reset</em> the permissions</span> 
</p> 

<div>
  <button id="show_notification">Show Notification</button>
  <button id="show_delayed_notification">Show Notification after 5 seconds</button>  
</div>

JavaScript

document.getElementById('request_permission').addEventListener('click', function() {
    window.webkitNotifications.requestPermission();
  }, false);
  
  document.getElementById('show_notification').addEventListener('click', function() {
    showNotification();
  }, false);
  
  document.getElementById('show_delayed_notification').addEventListener('click', function() {
    setTimeout(function() { showNotification(); }, 5000);
  }, false);
  
  function showNotification() {
    var text = 'You got a new email from [email protected]'
    if (window.webkitNotifications.checkPermission() == 0) {
      // note the show()
      window.webkitNotifications.createNotification('', 'Plain Text Notification', text).show(); 
    } else {
      alert('You have to click on "Set notification permissions for this page" first to be able to receive notifications.');
    }  
  }