Esempio di notifica desktop Chrome [chiuso]

Come si usano le notifiche desktop di Chrome ? Vorrei che usassi quello nel mio codice.

Aggiornamento : ecco un post sul blog che spiega le notifiche di webkit con un esempio.

Nei browser moderni, ci sono due tipi di notifiche:

• Notifiche desktop : semplici da attivare, funzionano fino a quando la pagina è aperta e possono scomparire automaticamente dopo alcuni secondi
• Notifiche di Service Serviceer : un po 'più complicate, ma possono funzionare in background (anche dopo la chiusura della pagina), sono persistenti e supportano i pulsanti di azione

La chiamata API utilizza gli stessi parametri (ad eccezione delle azioni - non disponibili nelle notifiche desktop), che sono ben documentati su MDN e per gli operatori del servizio, sul sito Web di Google Fundamentals .

Di seguito è riportato un esempio funzionante di notifiche desktop per Chrome, Firefox, Opera e Safari. Tieni presente che, per motivi di sicurezza, a partire da Chrome 62, l' autorizzazione per l'API di notifica potrebbe non essere più richiesta da un iframe di origine incrociata , quindi non possiamo dimostrarlo utilizzando gli snippet di codice di StackOverflow. Dovrai salvare questo esempio in un file HTML sul tuo sito / applicazione e assicurarti di utilizzare localhost://o HTTPS.

// request permission on page load
document.addEventListener('DOMContentLoaded', function() {
 if (!Notification) {
  alert('Desktop notifications not available in your browser. Try Chromium.');
  return;
 }

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


function notifyMe() {
 if (Notification.permission !== 'granted')
  Notification.requestPermission();
 else {
  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!',
  });
  notification.onclick = function() {
   window.open('http://stackoverflow.com/a/13328397/1269037');
  };
 }
}

 <button onclick="notifyMe()">Notify me!</button>

Stiamo utilizzando l' API di notifica W3C . Non confonderlo con l' API di notifica delle estensioni di Chrome , che è diversa. Le notifiche delle estensioni di Chrome ovviamente funzionano solo con le estensioni di Chrome e non richiedono alcuna autorizzazione speciale da parte dell'utente.

Le notifiche W3C funzionano in molti browser (vedi supporto su caniuse ) e richiedono l'autorizzazione dell'utente. Come best practice, non chiedere questa autorizzazione fin dall'inizio. Spiegare innanzitutto all'utente perché vorrebbero le notifiche e vedere altri schemi di notifiche push .

Nota che Chrome non rispetta l'icona di notifica su Linux, a causa di questo errore .

Parole finali

Il supporto delle notifiche è stato in continuo mutamento, con varie API che sono state deprecate negli ultimi anni. Se sei curioso, controlla le modifiche precedenti di questa risposta per vedere cosa funzionava in Chrome e per imparare la storia delle notifiche HTML avanzate.

Ora l'ultimo standard è disponibile su https://notifications.spec.whatwg.org/ .

Per quanto riguarda il motivo per cui ci sono due chiamate diverse per lo stesso effetto, a seconda che tu sia o meno un lavoratore dell'assistenza: vedi questo biglietto che ho archiviato mentre lavoravo su Google .

Vedi anche notify.js per una libreria di helper.

Controlla il design e le specifiche API (è ancora una bozza) o controlla l'origine da (pagina non più disponibile) per un semplice esempio: è principalmente una chiamata a window.webkitNotifications.createNotification.

Se vuoi un esempio più solido (stai cercando di creare la tua estensione di Google Chrome e desideri sapere come gestire le autorizzazioni, l'archiviazione locale e così via), dai un'occhiata all'estensione di Gmail Notifier : scarica il file crx invece di installare esso, decomprimilo e leggi il suo codice sorgente.

Sembra che window.webkitNotificationssia già stato deprecato e rimosso. Tuttavia, c'è una nuova API e sembra funzionare anche nell'ultima versione di Firefox.

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 if the user is okay to get some notification
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  // Note, Chrome does not implement the permission static property
  // So we have to check for NOT 'denied' instead of 'default'
  else if (Notification.permission !== 'denied') {
    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 {
    alert(`Permission is ${Notification.permission}`);
  }
}

codepen

Mi piace: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples ma utilizza vecchie variabili, quindi la demo non funziona più. webkitNotificationsè adesso Notification.

Ho creato questo semplice wrapper di notifica. Funziona su Chrome, Safari e Firefox.

Probabilmente anche su Opera, IE e Edge, ma non l'ho ancora testato.

Basta ottenere il file notify.js da qui https://github.com/gravmatt/js-notify e inserirlo nella tua pagina.

Scaricalo su Bower

$ bower install js-notify

Ecco come funziona:

notify('title', {
    body: 'Notification Text',
    icon: 'path/to/image.png',
    onclick: function(e) {}, // e -> Notification object
    onclose: function(e) {},
    ondenied: function(e) {}
  });

Devi impostare il titolo ma l'oggetto json come secondo argomento è facoltativo.

Ecco una bella documentazione sulle API,

https://developer.chrome.com/apps/notifications

E, spiegazione video ufficiale di Google,

https://developers.google.com/live/shows/83992232-1001

Notify.js è un wrapper per le nuove notifiche di webkit. Funziona abbastanza bene.

http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/

<!DOCTYPE html>

<html>

<head>
<title>Hello!</title>
<script>
function notify(){

if (Notification.permission !== "granted") {
Notification.requestPermission();
}
 else{
var notification = new Notification('hello', {
  body: "Hey there!",
});
notification.onclick = function () {
  window.open("http://google.com");
};
}
}
</script>
</head>

<body>
<button onclick="notify()">Notify</button>
</body>