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.
javascript
desktop
google-chrome
notifications
Sridhar Ratnakumar
quelle
quelle
Antworten:
In modernen Browsern gibt es zwei Arten von Benachrichtigungen:
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 verwenden
localhost://
HTTPS verwenden.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 .
quelle
Ü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.
quelle
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.Codepen
quelle
else
am Ende ein Extra hinzugefügt , um Ihnen zu sagen, wo das Problem liegt. Sie haben wahrscheinlich Benachrichtigungen wie mich global deaktiviert: \Ich mag: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples, aber es werden alte Variablen verwendet, sodass die Demo nicht mehr funktioniert.
webkitNotifications
ist jetztNotification
.quelle
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
So funktioniert es:
Sie müssen den Titel festlegen, aber das json-Objekt als zweites Argument ist optional.
quelle
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
quelle
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/
quelle
quelle
Notification.requestPermission();
, wirdvar notification = new Notification('hello', { body: "Hey there!", });
die Benachrichtigung angezeigt.