Beispiel für eine Chrome-Desktop-Benachrichtigung [geschlossen]

Wie verwendet man Chrome-Desktop-Benachrichtigungen ? Ich möchte, dass das in meinem eigenen Code verwendet wird.

Update : Hier ist ein Blog-Beitrag , in dem Webkit-Benachrichtigungen anhand eines Beispiels erläutert werden.

In modernen Browsern gibt es zwei Arten von Benachrichtigungen:

• Desktop-Benachrichtigungen - einfach auszulösen, funktionieren, solange die Seite geöffnet ist, und verschwinden möglicherweise nach einigen Sekunden automatisch
• Service Worker-Benachrichtigungen - etwas komplizierter, können jedoch im Hintergrund (auch nach dem Schließen der Seite) ausgeführt werden, sind dauerhaft und unterstützen Aktionsschaltflächen

Der API-Aufruf verwendet dieselben Parameter (mit Ausnahme von Aktionen - nicht verfügbar für Desktop-Benachrichtigungen), die auf MDN und für Servicemitarbeiter auf der Google Web Fundamentals- Website gut dokumentiert sind .

Unten 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 wird. Daher können wir dies nicht mit den Code-Snippets von StackOverflow testen. Sie müssen dieses Beispiel in einer HTML-Datei auf Ihrer Site / Anwendung speichern und sicherstellen, dass Sie es verwendenlocalhost:// 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');
  };
 }
}

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

Wir benutzen die W3C-Benachrichtigungs- API. Verwechseln Sie dies nicht mit der anderen Benachrichtigungs-API für Chrome- Erweiterungen . Chrome-Erweiterungsbenachrichtigungen funktionieren offensichtlich nur in Chrome-Erweiterungen und erfordern keine besondere Erlaubnis des Benutzers.

W3C-Benachrichtigungen funktionieren in vielen Browsern (siehe Support unter caniuse ) und erfordern eine Benutzerberechtigung. Bitten Sie als bewährte Methode nicht sofort um diese Erlaubnis. Erklären Sie dem Benutzer zuerst, warum er Benachrichtigungen möchte, und sehen Sie andere Push-Benachrichtigungsmuster .

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

Letzte Worte

Die Benachrichtigungsunterstützung hat sich ständig verändert, und verschiedene APIs wurden in den letzten Jahren nicht mehr unterstützt. Wenn Sie neugierig sind, überprüfen Sie die vorherigen Änderungen dieser Antwort, um zu sehen, was früher in Chrome funktioniert hat, und um die Geschichte der umfangreichen HTML-Benachrichtigungen zu erfahren.

Jetzt ist der neueste Standard bei https://notifications.spec.whatwg.org/ .

Je nachdem, ob Sie in einem Servicemitarbeiter arbeiten oder nicht, erfahren Sie, warum zwei verschiedene Anrufe mit demselben Effekt ausgeführt werden dieses Ticket, das ich während meiner Arbeit bei Google eingereicht habe .

Siehe auch notify.js für eine Hilfsbibliothek .

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

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

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

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

Ich mag: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples, aber es werden alte Variablen verwendet, sodass die Demo nicht mehr funktioniert. webkitNotificationsist jetzt Notification.

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

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

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

Hol es dir auf Bower

$ bower install js-notify

So funktioniert es:

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

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

Hier ist eine schöne Dokumentation zu APIs,

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

Und offizielle Videoerklärung von Google,

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

Notify.js ist ein Wrapper um die neuen Webkit-Benachrichtigungen. Es funktioniert ziemlich gut.

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>