html [js-chrome桌面通知]浏览器通知#js

Posted 2021-05-10

<!--
notifications for Chrome, Firefox, Opera and Safari
other solution use lib: https://github.com/alexgibson/notify.js/
-->
<button onclick="notifyMe()">Notify me!</button>
<script>
// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
  if (!Notification || !("Notification" in window)) {
    alert('Desktop notifications not available in your browser. Try Chromium.'); 
    return;
  }

  if (Notification.permission !== "granted")
    Notification.requestPermission();
});

function notifyMe() {
  //grant notification in first time
  if (Notification.permission !== "granted") {	//or !== 'denied'
    Notification.requestPermission();
  	
    //with callback
    Notification.requestPermission(function (permission) {
      // Whatever the user answers, we make sure we store the information
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }
      
      // If the user is okay, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }
  else {
    //## build notification popup
    var notification = new Notification('Notification title', {
      icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
      body: "Hey there! You've been notified!",
    });
    //simple
    var notification = new Notification("Hi there!");
    
	//## click on notification
    notification.onclick = function () {
      window.open("http://stackoverflow.com/a/13328397/1269037");      
    };

  }

}
</script>