Wie implementiert man Desktop-Benachrichtigungen in modernen Browsern?

Beispiel für eine Chrome-Desktop-Benachrichtigung

In modernen Browsern gibt es zwei Arten von Benachrichtigungen:

• Desktop Benachrichtigungen – einfach auszulösen, aktiv, solange die Seite geöffnet ist, und kann nach einigen Sekunden automatisch verschwinden.
• Benachrichtigungen für Servicemitarbeiter – Etwas komplex, aber sie funktionieren im Hintergrund (auch nachdem die Seite geschlossen wurde), sind dauerhaft und unterstützen Aktionsschaltflächen.

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

Hier ist ein funktionierendes Beispiel einer Desktop-Benachrichtigung für Chrome, Firefox, Opera und Safari. Beachten Sie, dass aus Sicherheitsgründen ab Chrome 62 möglicherweise keine Benachrichtigungs-API-Berechtigungen mehr vom Cross-Origin-Framework angefordert werden. Daher können wir dies nicht anhand eines Codeausschnitts von StackOverflow demonstrieren. Sie müssen dieses Beispiel in der HTML-Datei Ihrer Website/Anwendung speichern und darauf achten, localhost:// oder HTTPS zu verwenden.

<code class="js">// 在页面加载时请求权限
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');
  };
 }
}</code>

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

Das obige ist der detaillierte Inhalt vonWie implementiert man Desktop-Benachrichtigungen in modernen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!