Wie funktionieren Desktop-Benachrichtigungen in Chrome?

Chrome Desktop-Benachrichtigungen erklärt

Desktop-Benachrichtigungen in modernen Browsern ermöglichen die Anzeige einfacher Nachrichten auf dem Bildschirm. Sie sind besonders nützlich, wenn Sie Benutzer benachrichtigen oder informieren möchten, auch wenn sie nicht mit Ihrer Website interagieren.

Es gibt zwei Arten von Benachrichtigungen:

Desktop-Benachrichtigungen:

• Einfach anzuzeigen
• Verschwindet nach ein paar Minuten automatisch Sekunden
• Nur ​​verfügbar, während die Webseite geöffnet ist

Benachrichtigungen für Servicemitarbeiter:

• Komplexer zu implementieren
• Kann dauerhaft sein und auch dann angezeigt werden, wenn die Webseite geschlossen ist
• Unterstützungsaktion Schaltflächen

Zugriff auf die Desktop-Benachrichtigungs-API:

Die Desktop-Benachrichtigungs-API verwendet ähnliche Parameter für beide Typen, wie auf MDN dokumentiert. So greifen Sie auf diese API zu:

1. Berechtigung beim Laden der Seite anfordern.
2. Erstellen Sie ein neues Benachrichtigungsobjekt mit einem Titel, einem Symbol und einem Textkörper.
3. Weisen Sie ein Ereignis zu Listener zur Verarbeitung von Aktionen (onclick).

Beispiel Implementierung:

<code class="js">document.addEventListener('DOMContentLoaded', function() {
  if (!Notification) alert('Desktop notifications not available in your browser.');
  if (Notification.permission !== 'granted') Notification.requestPermission();
});

function notifyMe() {
  if (Notification.permission === 'granted') {
    var notification = new Notification('Notification title', {
      icon: 'icon.png',
      body: 'Hey there! You\'ve been notified!',
    });
    notification.onclick = function() {
      window.open('http://example.com');
    };
  } else Notification.requestPermission();
}</code>

HTML:

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

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