javascript notifications - Chrome-Desktop-Benachrichtigungsbeispiel




5 Answers

Unten finden Sie ein Beispiel für Desktopbenachrichtigungen für Chrome, Firefox, Opera und Safari. Beachten Sie, dass aus Sicherheitsgründen, beginnend mit Chrome 62, die Berechtigung für die Benachrichtigungs-API möglicherweise nicht mehr von einem ursprungsübergreifenden Iframe angefordert wird. Daher müssen Sie dieses Beispiel in einer HTML-Datei auf Ihrer Website / Anwendung speichern und sicherstellen Verwenden von HTTPS.

// 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 verwenden die W3C Notifications API, die bei MDN dokumentiert ist. Verwechseln Sie das nicht mit der Benachrichtigungs-API für Chrome-Erweiterungen , die anders ist. Chrome-Erweiterungsbenachrichtigungen funktionieren natürlich nur in Chrome-Erweiterungen, erfordern keine besonderen Berechtigungen des Benutzers, unterstützen Rich Text-Benachrichtigungen, verschwinden jedoch automatisch und der Benutzer bemerkt möglicherweise nicht, dass sie ausgelöst wurden . W3C-Benachrichtigungen funktionieren in vielen Browsern (siehe Unterstützung auf caniuse ), erfordern Benutzerrechte, stapeln über der vorherigen Benachrichtigung und verschwinden nicht automatisch in Chrome ( in Firefox ).

Letzte Worte

Die Benachrichtigungsunterstützung hat sich kontinuierlich verändert, und verschiedene APIs wurden in den letzten drei Jahren eingestellt. Wenn Sie neugierig sind, sehen Sie sich die vorherigen Änderungen dieser Antwort an, um zu sehen, was früher in Chrome funktioniert hat, und um die Geschichte von Rich-HTML-Benachrichtigungen kennenzulernen.

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

Es gibt auch einen anderen Aufruf (mit denselben Parametern), um Benachrichtigungen von Service-Mitarbeitern zu erstellen, die aus irgendeinem Grund keinen Zugriff auf den Notification() Konstruktor haben.

Siehe auch notify.js für eine notify.js .

api example

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

Update : Hier ist ein Blogbeitrag , der Webkit-Benachrichtigungen mit einem Beispiel erklärt.




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

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!");
      }
    });
  }

  // At last, if the user already denied any notification, and you 
  // want to be respectful there is no need to bother him any more.
}

codepen







<!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>




Aus irgendeinem Grund funktionierte die angenommene Antwort nicht für mich, ich benutzte das folgende Beispiel:

https://developer.chrome.com/apps/app_codelab_alarms#create-notification

function notifyMe() {

    chrome.notifications.create('reminder', {
        type: 'basic',
        iconUrl: 'icon.png',
        title: 'Don\'t forget!',
        message: 'You have  things to do. Wake up, dude!'
    }, function(notificationId) {});

}



Related

javascript desktop google-chrome notifications