Notifiche WEB, come implementarle sul proprio sito

Di recente mi è stato chiesto di implementare su alcuni siti le Notifiche via Browser Desktop da non confondere con le PUSH Notifiche anche se all’ apparenza possono sembrare uguali.

Eccovi un esempio:

I campi di utilizzo possono essere svariati, ad esempio quello di notificare un messaggio in chat oppure segnalare una notizia importante o un evento ricorrente.

Andiamo ai fatti, quello che occorre è essenzialmente un evento che attivi la notifica in questo caso un pulsante

< button onclick="notifyMe()">Notifica!< /button>

e dello script ad esso connessa

< script>

function notifyMe() {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let's check whether notification permissions have already been granted
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
            var options = {
  	body: "Ti piacciono le notifiche?",
  	icon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Peace-symbol.png/145px-Peace-symbol.png',
  } 
    var notification = new Notification("Ciao!",options);
  }

  // Otherwise, we need to ask the user for permission
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
         var options = {
  	body: "Ti piacciono le notifiche?",
  	icon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Peace-symbol.png/145px-Peace-symbol.png',
  } 
        var notification = new Notification("Ciao!",options);
      }
    });
  }

  // At last, if the user has denied notifications, and you 
  // want to be respectful there is no need to bother them any more.
}Notification.requestPermission();function spawnNotification(theBody,theIcon,theTitle) {
  var options = {
      body: theBody,
      icon: theIcon
  }
  var n = new Notification(theTitle,options);
}
 < /script>

Apri in jsfiddle

Ecco ora sta a voi decidere come usare questa novità, vi faccio presente che le notifiche NON funziona al momento su Internet Explorer .
Vi consiglio inoltre di leggere le API su sito di Mozilla Foundation
https://developer.mozilla.org/en-US/docs/Web/API/notification
e lasciate spazio alla fantasia!

Annunci