Chrome-Desktop-Benachrichtigungsbeispiel

Question

Wie verwendet man Chrome-Desktopbenachrichtigungen? Ich möchte das in meinem eigenen Code verwenden.

Aktualisierung: Hier ist ein Blog-Beitrag, der Webkit-Benachrichtigungen mit einem Beispiel erklärt.

Answer 1

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 einigen Sekunden automatisch verschwinden
• Service-Worker-Benachrichtigungen - etwas komplizierter, können jedoch im Hintergrund arbeiten (auch nachdem die Seite geschlossen wurde), sind persistent und unterstützen Aktionsbuttons

Der API-Aufruf verwendet dieselben Parameter (außer für Aktionen - nicht verfügbar bei Desktop-Benachrichtigungen), die auf MDN und für Service-Worker auf der Website von 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 ab Chrome 62 die Berechtigung für die Benachrichtigungs-API möglicherweise nicht mehr von einem Cross-Origin-iFrame angefordert werden kann, sodass wir dies nicht mithilfe von StackOverflow-Codeausschnitten demonstrieren können. Sie müssen dieses Beispiel in einer HTML-Datei auf Ihrer Website/an Ihrer Anwendung speichern und sicherstellen, dass Sie localhost:// oder HTTPS verwenden.

// Berechtigung beim Laden der Seite anfordern
document.addEventListener('DOMContentLoaded', function() {
 if (!Notification) {
  alert('Desktop-Benachrichtigungen sind in Ihrem Browser nicht verfügbar. Versuchen Sie es mit Chromium.');
  return;
 }

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

function notifyMe() {
 if (Notification.permission !== 'granted')
  Notification.requestPermission();
 else {
  var notification = new Notification('Benachrichtigungstitel', {
   icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
   body: 'Hey! Sie wurden benachrichtigt!',
  });
  notification.onclick = function() {
   window.open('http://stackoverflow.com/a/13328397/1269037');
  };
 }
}

 Benachrichtige mich!

Wir verwenden die W3C Benachrichtigungen API. Verwechseln Sie dies nicht mit der Chrome Erweiterungen Benachrichtigungen API, die unterschiedlich ist. Benachrichtigungen von Chrome-Erweiterungen funktionieren natürlich nur in Chrome-Erweiterungen und erfordern keine besondere Genehmigung des Benutzers.

W3C-Benachrichtigungen funktionieren in vielen Browsern (siehe Support auf caniuse) und erfordern die Zustimmung des Benutzers. Als bewährte Praxis sollten Sie diese Berechtigung nicht gleich zu Beginn anfordern. Erklären Sie dem Benutzer zuerst, warum er Benachrichtigungen wünschen würde und sehen Sie sich andere Push-Benachrichtigungsmuster an.

Beachten Sie, dass Chrome das Benachrichtigungssymbol unter Linux aufgrund dieses Fehlers nicht beachtet.

Abschließende Worte

Die Unterstützung von Benachrichtigungen war in den letzten Jahren einem kontinuierlichen Wandel unterworfen, wobei verschiedene APIs veraltet sind. Wenn Sie neugierig sind, überprüfen Sie die vorherigen Bearbeitungen dieses Beitrags, um zu sehen, was in Chrome früher funktioniert hat, und erfahren Sie die Geschichte der reichhaltigen HTML-Benachrichtigungen.

Jetzt entspricht der neueste Standard unter https://notifications.spec.whatwg.org/.

Warum es zwei unterschiedliche Aufrufe für denselben Effekt gibt, je nachdem, ob Sie sich in einem Service Worker befinden oder nicht, erfahren Sie unter diesem Ticket, das ich während meiner Arbeit bei Google eingereicht habe.

Siehe auch notify.js für eine Hilfsbibliothek.

Answer 2

Überprüfen Sie das Design und die API-Spezifikation (es handelt sich noch um einen Entwurf) oder überprüfen Sie die Quelle (Seite nicht mehr verfügbar) für ein einfaches Beispiel: Es handelt sich hauptsächlich um einen Aufruf von window.webkitNotifications.createNotification.

Wenn Sie ein robustes Beispiel wünschen (Sie versuchen, Ihre eigene Google Chrome-Erweiterung zu erstellen und möchten wissen, wie Sie mit Berechtigungen, lokalem Speicher und dergleichen umgehen), werfen Sie einen Blick auf die Gmail Notifier Erweiterung: Laden Sie die crx-Datei herunter anstatt sie zu installieren, entpacken Sie sie und lesen Sie den Quellcode.

Answer 3

Siehe auch ServiceWorkerRegistration.showNotification

Es scheint, dass window.webkitNotifications bereits veraltet und entfernt wurde. Es gibt jedoch eine neue API, die anscheinend auch in der neuesten Version von Firefox funktioniert.

function notifyMe() {
  // Überprüfen, ob der Browser Benachrichtigungen unterstützt
  if (!("Notification" in window)) {
    alert("Dieser Browser unterstützt keine Desktop-Benachrichtigungen");
  }

  // Überprüfen, ob der Benutzer mit Benachrichtigungen einverstanden ist
  else if (Notification.permission === "granted") {
    // Wenn ja, Benachrichtigung erstellen
    var notification = new Notification("Hallo!");
  }

  // Andernfalls Benutzer um Erlaubnis bitten
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {

      // Benutzerantwort speichern
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }

      // Bei Erlaubnis Benachrichtigung erstellen
      if (permission === "granted") {
        var notification = new Notification("Hallo!");
      }
    });
  } else {
    alert(`Erlaubnis ist ${Notification.permission}`);
  }
}

codepen

Answer 4

Ich mag: http://www.html5rocks.com/de/tutorials/notifications/quick/#toc-examples, aber es verwendet alte Variablen, deshalb funktioniert das Demo nicht mehr. webkitNotifications ist jetzt Notification.

Answer 5

Ich habe diesen einfachen Benachrichtigungs-Wrapper erstellt. Es funktioniert in Chrome, Safari und Firefox.

Wahrscheinlich auch in Opera, IE und Edge, aber ich habe es noch nicht getestet.

Holen Sie sich einfach die notify.js-Datei von hier https://github.com/gravmatt/js-notify und fügen Sie sie auf Ihrer Seite ein.

Holen Sie es sich über Bower

$ bower install js-notify

So funktioniert es:

notify('title', {
    body: 'Benachrichtigungstext',
    icon: 'pfad/zum/bild.png',
    onclick: function(e) {}, // e -> Benachrichtigungsobjekt
    onclose: function(e) {},
    ondenied: function(e) {}
  });

Sie müssen den Titel festlegen, aber das JSON-Objekt als zweites Argument ist optional.