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

409

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.

Sridhar Ratnakumar
quelle
2
Ich habe unten eine Antwort hinterlassen, die ab November 2012 aktualisiert wurde, nachdem HTML-Benachrichtigungen veraltet waren. Es gibt ein aktuelles Beispiel wie das, nach dem Sie gesucht haben.
Dan Dascalescu
1
Update : Ab 2015 können Websites auch echte Push-Benachrichtigungen senden, die auch dann zugestellt werden, wenn der Benutzer nicht auf der Website surft. Überprüfen Sie heraus diese Antwort
collimarco
3
Alle diese Wähler, die es als geschlossen markieren, müssen IE / Safari-Liebhaber sein. Es ist spezifisch für die Browserbenachrichtigung und insbesondere für Chrome. Wenn es so unangebracht ist, warum gibt es dann so viele Leute, die es mögen und es überhaupt als markiert markieren?
Prash
2
Warum nicht zum Thema?
SmartManoj

Antworten:

716

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 .

Dan Dascalescu
quelle
4
@mghaoui - beliebt! = wahr (unbedingt). Ich habe diese als die richtige Antwort markiert.
Sridhar Ratnakumar
2
window.webkitNotifications.checkPermission () löst eine Ausnahme in Nicht-Chrome-Browsern aus
JT Taylor
2
Schließen ist keine Methode. Ich denke, Sie möchten Benachrichtigung.cancel ()> Dekadecity.net/blog/2012/10/12/webkit-notification-api >> Auch scheint es von selbst zu schließen.
KingOfHypocrites
3
Vielen Dank für die Unterstützung. Die Verwendung mit Pusher hat mir beim Aufbau eines Benachrichtigungssystems geholfen.
Awijeet
3
funktioniert nicht in Chrome Version 47.0.2526.80 dev-m während der Arbeit an Mozilla Fire Fox unter Windows 8
Sarz
87

Ü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.

GmonC
quelle
Gibt es nichts, was für alle Browser funktioniert?
Royi Namir
@ Royi, Es gibt eine Firefox-Erweiterung sowie eine native Firefox-Implementierung, die früher oder später verfügbar sein wird . Im Fall von Internet Explorer besteht eine mögliche Lösung darin, Benutzer Ihrer Website zum Herunterladen von Chrome Frame aufzufordern , da dies eine praktikable Lösung wäre, um Benachrichtigungen zum Laufen zu bringen. Es gibt eine andere Microsoft-Lösung .
Bryan Field
7
Diese Antwort ist mittlerweile, 4 Jahre später, völlig veraltet. @ RoyiNamir: Es gibt die Benachrichtigungs-API. Überprüfen Sie meine Antwort .
Dan Dascalescu
1
Der Beispiellink ist tot.
Vinny
33

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

mpen
quelle
@Miron Bitte schauen Sie sich den Hyperlink im ersten Absatz an. Ich habe die Quelle verlinkt und dann den Code gemäß SO-Etikette in meine Antwort kopiert. Wenn MDN kein Wiki wäre, hätte ich vielleicht genauer gesagt, wer der Autor ist, aber ich gebe nichts vor.
Mpen
Ich sehe nicht, wo er gesagt hat, dass er es geschrieben hat?
Brandito
Codepen funktioniert nicht
Stepan
1
@StepanYakovenko Versuchen Sie den Codepen-Link erneut. Ich habe elseam Ende ein Extra hinzugefügt , um Ihnen zu sagen, wo das Problem liegt. Sie haben wahrscheinlich Benachrichtigungen wie mich global deaktiviert: \
mpen
14

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.

Rudie
quelle
Das Twitter-Beispiel dort funktioniert nicht mehr.
Dan Dascalescu
Sie sollten html5rocks.com/en/profiles mitteilen . Einer von ihnen muss für Twitter arbeiten =)
Rudie
Heh. Hakim war der beste Typ, der benachrichtigt werden konnte , da ich zufällig zu seinem Präsentationsrahmen beigetragen habe.
Dan Dascalescu
4

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.

gravmatt
quelle
@gravmatt Haben Sie ein Problem mit Firefox festgestellt, bei dem die Benachrichtigung nicht angezeigt wird, wenn mehr als ein Browserfenster geöffnet ist?
eran otzap
@eranotzap sollte es mit mehreren Registerkarten funktionieren. Ich führe ein Projekt durch, bei dem dies kein Problem ist. aber ich bin nicht sicher mit mehreren Fenstern.
Gravmatt
Ich habe das gleiche Problem mit mehreren Registerkarten
eran otzap
Funktioniert es in Firefox über mehrere Registerkarten?
eran otzap
1
@eranotzap Ich habe es jetzt auf Windows und Mac getestet. Ich kann die Benachrichtigung in keiner Ecke des Bildschirms sehen, aber ich höre den Ton der Benachrichtigungen und auf dem Mac erhalte ich die Benachrichtigung in der Seitenleiste (mit mehreren geöffneten Registerkarten). Firefox ist der neue Internet Explorer.
Gravmatt
3
<!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>

Hina Halani
quelle
1
Bitte veröffentlichen Sie keine Nur-Code-Antworten. Fügen Sie ein paar Kommentare und / oder Erklärungen hinzu, damit die Leute, die diesen Beitrag in Zukunft lesen, ihn verstehen.
Adriaan
Für dieses spezielle Code-Snippet scheint es jedoch ziemlich einfach zu sein. Andere Benutzer könnten auch eine Folgefrage zu dem Kommentar posten, oder?
Frostshoxx
1
JSfiddle mit dem obigen Code funktioniert nicht. "Die Berechtigung für die Benachrichtigungs-API wird möglicherweise nicht mehr von einem Ursprungs-Iframe angefordert." Wenn Sie jedoch die Entwicklerkonsole öffnen und eingeben Notification.requestPermission();, wird var notification = new Notification('hello', { body: "Hey there!", });die Benachrichtigung angezeigt.
Kai Noack
Es tut mir leid, aber was genau trägt diese Antwort zu meiner bei?
Dan Dascalescu