Beispiel für eine Chrome-Desktop-Benachrichtigung

In modernen Browsern gibt es zwei Arten von Benachrichtigungen:

• Desktop-Benachrichtigungen - einfach auszulösen, funktionieren, solange die Seite geöffnet ist, und können nach ein paar Sekunden automatisch verschwinden
• Service Worker notifications - etwas komplizierter, aber sie können im Hintergrund arbeiten (auch nachdem die Seite geschlossen wurde), sind dauerhaft und unterstützen Aktionsschaltflächen

Der API-Aufruf benötigt dieselben Parameter (mit Ausnahme der Aktionen, die bei Desktop-Benachrichtigungen nicht verfügbar sind), die auf MDN und für Service Worker auf Google's Web Fundamentals gut dokumentiert sind.

Im Folgenden finden Sie ein funktionierendes Beispiel für Desktop-Benachrichtigungen für Chrome, Firefox, Opera und Safari. Beachten Sie, dass aus Sicherheitsgründen, beginnend mit Chrome 62, die Erlaubnis für die Benachrichtigungs-API nicht mehr von einem herkunftsübergreifenden iframe angefordert werden darf, so dass wir dies nicht mit den Code-Schnipseln von StackOverflow'demonstrieren können. Sie müssen dieses Beispiel in einer HTML-Datei auf Ihrer Website/Anwendung speichern und sicherstellen, dass Sie localhost:// oder HTTPS verwenden.

// 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');
  };
 }
}

 Notify me!

Wir verwenden die W3C Notifications API. Verwechseln Sie dies nicht mit der Chrome Extensions Notifications API, die anders ist. Chrome-Erweiterungsbenachrichtigungen funktionieren offensichtlich nur in Chrome-Erweiterungen und erfordern keine spezielle Erlaubnis des Benutzers.

W3C-Benachrichtigungen funktionieren in vielen Browsern (siehe Unterstützung auf caniuse) und erfordern eine Benutzererlaubnis. Am besten ist es, wenn Sie diese Erlaubnis nicht von vornherein einholen. Erklären Sie dem Benutzer zuerst, warum er Benachrichtigungen wünscht und sehen Sie sich andere Push-Benachrichtigungsmuster an.

Beachten Sie, dass Chrome das Benachrichtigungssymbol unter Linux aufgrund dieses Fehlers nicht berücksichtigt.

Abschließende Worte

Die Unterstützung von Benachrichtigungen war in den letzten Jahren ständig im Wandel, da verschiedene APIs veraltet waren. Wenn Sie neugierig sind, sehen Sie sich die früheren Bearbeitungen dieser Antwort an, um zu sehen, was früher in Chrome funktionierte, und um die Geschichte der Rich-HTML-Benachrichtigungen zu erfahren.

Der aktuelle Standard ist unter https://notifications.spec.whatwg.org/ zu finden.

Warum es zwei verschiedene Aufrufe für denselben Effekt gibt, je nachdem, ob Sie sich in einem Service Worker befinden oder nicht, erfahren Sie in [diesem Ticket, das ich eingereicht habe, als ich bei Google arbeitete] (https://bugs.chromium.org/p/chromium/issues/detail?id=590029).

Siehe auch notify.js für eine Hilfsbibliothek.

Schauen Sie sich das Design und die API-Spezifikation an (es ist immer noch ein Entwurf) oder schauen Sie sich den Quellcode von (Seite nicht mehr verfügbar) für ein einfaches Beispiel an: Es ist hauptsächlich ein Aufruf von window.webkitNotifications.createNotification.

Wenn Sie ein robusteres Beispiel wollen (Sie versuchen, Ihre eigene Google Chrome's Erweiterung zu erstellen, und möchten wissen, wie man mit Berechtigungen, lokalem Speicher und dergleichen umgeht), schauen Sie sich Gmail Notifier Extension an: laden Sie die crx-Datei herunter, anstatt sie zu installieren, entpacken Sie sie und lesen Sie den Quellcode.

Ich mag: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples aber es verwendet alte Variablen, so dass die Demo nicht mehr funktioniert. WebkitNotifications" ist jetzt "Notification".