Anzeige dynamischer Nachrichten mithilfe der Web -Benachrichtigungs -API

Web Benachrichtigungen API: Machen Sie Website -Benachrichtigungen aus Browserbeschränkungen

Wir sind es gewohnt, mobile Benachrichtigungen von bevorzugten Websites oder Anwendungen zu beenden, aber jetzt wird es für Browser immer häufiger, Benachrichtigungen direkt voranzutreiben. Beispielsweise sendet Facebook Benachrichtigungen, wenn Sie eine neue Freundschaftsanfrage haben, oder jemand Kommentare zu einem Beitrag, an dem Sie teilnehmen.

Als Front-End-Entwickler bin ich gespannt, wie man Browser-Benachrichtigungen verwendet, um Websites zu servieren, die nicht mit vielen Informationsflussen umgehen. Wie füge ich relevante Browser -Benachrichtigungen hinzu, die auf dem Interesse der Besucher an der Website basieren?

Dieser Artikel zeigt, wie ein Benachrichtigungssystem auf der Concise CSS -Website implementiert wird, um Besucher jedes Mal aufmerksam zu machen, wenn eine neue Version des Frameworks veröffentlicht wird. Ich werde zeigen, wie Sie die Lokalstor- und Browser -Benachrichtigungs -API verwenden, um dies zu erreichen.

Benachrichtigungs -API -Grundlagen

Zunächst müssen wir feststellen, ob der Browser des Besuchers Benachrichtigungen unterstützt. Der größte Teil der Arbeiten in diesem Tutorial erfolgt durch das Benachrichtigungsobjekt.

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

derzeit bestimmen wir nur, ob der Browser Benachrichtigungen unterstützt. Nach der Bestätigung müssen wir wissen, ob wir den Besuchern Berechtigungsanfragen anzeigen können.

wir speichern die Ausgabe der Berechtigungseigenschaft in einer Variablen. Wenn die Erlaubnis erteilt oder abgelehnt wurde, wird nichts zurückgegeben. Wenn wir zuvor keine Berechtigungen angefordert haben, verwenden wir die Anfragemethode, um Berechtigungen zu beantragen.

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

Sie sollten Eingabeaufforderungen ähnlich wie das obige Bild in Ihrem Browser sehen.

Jetzt, da wir Berechtigungen angefordert haben, ändern wir den Code so, dass die Benachrichtigung angezeigt wird, wenn die Berechtigungen zulässig sind:

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification
      .requestPermission()
      .then(function() {
        var notification = new Notification("Hello, world!");
      });
  }
})();

Obwohl es einfach ist, hat es eine effektive Funktion.

Wir verwenden die vielversprechende Syntax der RequestPermission () -Methode hier, um Benachrichtigungen nach Erlaubnis anzuzeigen. Wir verwenden den Benachrichtigungskonstruktor, um Benachrichtigungen anzuzeigen. Dieser Konstruktor nimmt zwei Argumente ein, einen für den Benachrichtigungstitel und den anderen für Optionen. Informationen zu einer vollständigen Liste der Optionen, die übergeben werden können, finden Sie im Dokumentationslink.

Speicher -Framework -Version

oben erwähnt werden wir Lokalstorage verwenden, um Benachrichtigungen anzuzeigen. Die Verwendung von LocalStorage ist eine empfohlene Möglichkeit, anhaltende Kundeninformationen in JavaScript zu speichern. Wir erstellen einen Lokalstor -Schlüssel, der als Conciseversion bezeichnet wird und die aktuelle Version des Frameworks enthält (z. B. 1.0.0). Wir können diesen Schlüssel dann verwenden, um eine neue Version des Frameworks zu überprüfen.

Wie aktualisiert ich den Wert des Conciseversion -Schlüssels mit der neuesten Version des Frameworks? Wir brauchen eine Möglichkeit, die aktuelle Version festzulegen, wenn jemand eine Website besucht. Wir müssen auch den Wert aktualisieren, wenn eine neue Version veröffentlicht wird. Jedes Mal, wenn sich der Conciseversion -Wert ändert, muss die Besucher eine Benachrichtigung angezeigt werden, um eine neue Version des Frameworks anzukündigen.

Wir werden dieses Problem lösen, indem wir der Seite ein verstecktes Element hinzufügen. Dieses Element wird eine Klasse namens JS-Umlaufversion haben und enthalten nur die aktuelle Version des Frameworks. Da dieses Element im DOM existiert, können wir mit JavaScript problemlos mit ihm interagieren.

Dieses versteckte Element wird verwendet, um die Framework -Version in unserem Conciseversion -Schlüssel zu speichern. Wir werden dieses Element auch verwenden, um den Schlüssel zu aktualisieren, wenn eine neue Version des Frameworks veröffentlicht wird.

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

Wir können eine kleine Menge CSS verwenden, um dieses Element zu verbergen:

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

Hinweis: Da dieses Element nichts Bedeutung enthält, müssen Bildschirmleser auf dieses Element nicht zugreifen. Aus diesem Grund habe ich die aria-versteckte Eigenschaft auf True eingestellt und Anzeige verwendet: Keine als Methode zum Ausblenden von Elementen. Weitere Informationen zu versteckten Inhalten finden Sie in diesem Webaim -Artikel.

Jetzt können wir dieses Element in JavaScript bekommen und damit interagieren. Wir müssen eine Funktion schreiben, um den Text in das gerade erstellte verborgene Element zurückzugeben.

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification
      .requestPermission()
      .then(function() {
        var notification = new Notification("Hello, world!");
      });
  }
})();

Diese Funktion verwendet die textbezogene Eigenschaft, um den Inhalt des .js-Stromversionselements zu speichern. Fügen wir eine weitere Variable hinzu, um den Inhalt der Conciseversion LocalStorage -Schlüssel zu speichern.

<span class="js-currentVersion" aria-hidden="true">3.4.0</span>

Jetzt haben wir die neueste Version des Frameworks in einer Variablen und speichern den Lokalstor -Schlüssel in eine Variable. Es ist Zeit, Logik hinzuzufügen, um festzustellen, ob eine neue Version des Frameworks verfügbar ist.

Wir überprüfen zunächst, ob der Conciseversion -Schlüssel vorhanden ist. Wenn es nicht vorhanden ist, werden wir dem Benutzer die Benachrichtigung zeigen, da dies möglicherweise der erste Besuch ist. Wenn der Schlüssel vorhanden ist, prüfen wir, ob sein Wert (in der CurrentVersion Variable gespeichert) größer ist als der Wert der aktuellen Version (in der neuesten Variablen der neuesten Version). Wenn die neueste Version des Frameworks größer ist als die letzte Version, die der Besucher gesehen hat, wissen wir, dass die neue Version veröffentlicht wurde.

HINWEIS: Wir verwenden die Semver-Compare-Bibliothek, um zwei Versionszeichenfolgen zu vergleichenden.

Nachdem wir dies wissen, werden wir den Besuchern die Benachrichtigung zeigen und unseren Conciseversion -Schlüssel entsprechend aktualisieren.

[aria-hidden="true"] {
  display: none;
  visibility: hidden;
}

Um diese Funktion zu verwenden, müssen wir den folgenden Berechtigungscode ändern.

function checkVersion() {
  var latestVersion = document.querySelector(".js-currentVersion").textContent;
}

Dies ermöglicht es uns, Benachrichtigungen anzuzeigen, wenn der Benutzer zuvor Berechtigungen erteilt oder nur Berechtigungen erteilt hat.

Mitteilung

Bisher haben wir Benutzern nur einfache Benachrichtigungen gezeigt, die nicht viele Informationen enthalten. Schreiben wir eine Funktion, mit der wir Browser -Benachrichtigungen dynamisch erstellen und viele verschiedene Aspekte von Benachrichtigungen steuern können.

Diese Funktion enthält Parameter für Körpertext, Symbol, Titel und optionale Link und Benachrichtigungsdauer. Intern erstellen wir ein Optionsobjekt, um unseren Benachrichtigungs -Körpertext und unsere Symbole zu speichern. Wir erstellen auch eine neue Instanz des Benachrichtigungsobjekts und geben sowohl unseren Benachrichtigungs -Titel als auch das Optionsobjekt weiter.

Wenn wir als nächstes mit unseren Benachrichtigungen verlinken möchten, werden wir einen Onclick -Handler hinzufügen. Wir verwenden setTimeout (), um Benachrichtigungen nach einer bestimmten Zeit auszuschalten. Wenn die Zeit nicht angegeben ist, wenn diese Funktion aufgerufen wird, werden die Standardfünffl -Fünf Sekunden verwendet.

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

Ändern wir nun Checkversion (), um Benachrichtigungen über weitere Informationen an den Benutzer anzuzeigen.

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

Wir verwenden die Funktion "DisplayNotification", um Beschreibung, Bild, Titel und Link zu unseren Benachrichtigungen bereitzustellen.

HINWEIS: Wir verwenden ES6 -Template -Literale, um Ausdrücke in unseren Text einzubetten.

Voller Code und Test

Folgendes ist der vollständige Code in diesem Tutorial.

(CodePen -Link oder vollständige Codeblock sollte hier eingefügt werden)

Ausführen dieses Codes sollte die folgende Benachrichtigung in Ihrem Browser generieren.

Um Tests durchzuführen, müssen Sie mit den Benachrichtigungsberechtigungen Ihres Browsers vertraut sein. Hier finden Sie einige kurze Verweise auf die Verwaltung von Benachrichtigungen in Google Chrome, Safari, Firefox und Microsoft Edge. Darüber hinaus sollten Sie mit der Verwaltung der Entwicklerkonsole vertraut sein, um die Werte der Lokalstorage für einfache Tests zu löschen und zu ändern.

Sie können das Beispiel testen, indem Sie das Skript einmal ausführen und den Wert des HTML-Elements des JS-Stroms in das Skript ändern, um den Unterschied zu erkennen. Sie können auch mit derselben Version weitergeben, um zu bestätigen, dass Sie keine unnötigen Benachrichtigungen erhalten.

gehen Sie noch einen Schritt weiter

Dies ist alles, was wir brauchen, um dynamische Browser -Benachrichtigungen zu haben! Wenn Sie nach flexibleren Browser -Benachrichtigungen suchen, wird empfohlen, die API der Servicearbeiter zu verstehen. Der Service Worker kann verwendet werden, um auf Push -Benachrichtigungen zu reagieren, sodass Benutzer Benachrichtigungen erhalten, unabhängig davon, ob sie derzeit Ihre Website besuchen, wodurch zeitnaher Aktualisierungen ermöglicht werden können.

Browser Benachrichtigung API FAQ

Was ist die Browser -Benachrichtigungs -API und wie funktioniert sie?

Mit der Browser -Benachrichtigungs -API können Webanwendungen Systembenachrichtigungen an Benutzer anzeigen. Diese Benachrichtigungen ähneln Push -Benachrichtigungen auf mobilen Geräten und können auch dann angezeigt werden, wenn die Webseite nicht im Fokus steht. Die API beantragt Benutzerberechtigungen zur Anzeige von Benachrichtigungen. Sobald die Berechtigung erhalten wurde, können Webanwendungen Benachrichtigungen mithilfe von Benachrichtigungsobjekten erstellen und anzeigen.

So fordern Sie die Berechtigung zur Anzeige von Benachrichtigungen an?

Um die Erlaubnis anzufordern, können Sie die meldung.RequestPermission () -Methode verwenden. Diese Methode zeigt dem Benutzer ein Dialogfeld an, in dem er gefragt wird, ob Benachrichtigungen angezeigt werden können. Diese Methode gibt ein Versprechen zurück, das sich auf einen Berechtigungsstatus entscheidet, der "gewährt", "verweigert" oder "Standard" gewährt werden kann.

Wie erstelle und Anzeige von Benachrichtigungen?

Sobald die Berechtigung erhalten wurde, können Benachrichtigungen erstellt und mit dem Benachrichtigungskonstruktor angezeigt werden. Dieser Konstruktor akzeptiert zwei Parameter: den Titel der Benachrichtigung und ein Optionsobjekt. Das Optionsobjekt kann Eigenschaften wie Körper (den Text der Benachrichtigung), das Symbol (das zu angezeigte Symbol) und das Tag (die Kennung der Benachrichtigung) enthalten.

Kann ich Benachrichtigungen anzeigen, auch wenn die Webseite nicht im Fokus steht?

Ja, mit der Browser -Benachrichtigungs -API können Sie Benachrichtigungen anzeigen, auch wenn die Webseite nicht im Fokus steht. Dies ist sehr nützlich für Webanwendungen, die Benutzer über wichtige Ereignisse informieren müssen, auch wenn sie die Anwendung nicht aktiv verwenden.

Wie kann man mit Klickereignissen zu Benachrichtigungen umgehen?

Sie können Klick -Ereignisse zu Benachrichtigungen verarbeiten, indem Sie dem Benachrichtigungsobjekt einen Ereignishörer hinzufügen. Wenn der Benutzer auf die Benachrichtigung klickt, wird die Funktion des Ereignishörers aufgerufen.

Kann ich Benachrichtigungen programmatisch ausschalten?

Ja, Sie können Benachrichtigungen programmgesteuert schließen, indem Sie die Methode close () im Benachrichtigungsobjekt aufrufen. Dies ist nützlich, wenn Sie die Benachrichtigungen nach einer Weile automatisch ausschalten möchten.

Unterstützen alle Browser -Benachrichtigungen durch Browser?

Die meisten modernen Browser unterstützen Browser -Benachrichtigungen wie Chrome, Firefox, Safari und Edge. Die Unterstützung kann jedoch zwischen verschiedenen Versionen dieser Browser variieren, und einige ältere Browser unterstützen möglicherweise überhaupt keine Benachrichtigungen.

Kann ich das Aussehen von Benachrichtigungen anpassen?

Das Erscheinen von Benachrichtigungen hängt stark vom Betriebssystem und dem Browser ab. Sie können jedoch bestimmte Aspekte der Benachrichtigung anhand des Optionsobjekts an den Benachrichtigungskonstruktor wie Titel, Körpertext und Symbole anpassen.

Wie kann man überprüfen, ob der Benutzer die Erlaubnis zur Anzeige von Benachrichtigungen erteilt hat?

Sie können den aktuellen Berechtigungsstatus überprüfen, indem Sie auf die Benachrichtigung.Permission -Eigenschaft zugreifen. Diese Eigenschaft wird "gewährt", wenn der Benutzer Berechtigungen erteilt hat.

Kann ich die Browser -Benachrichtigungs -API in meinem Arbeitskript verwenden?

Ja, die Browser -Benachrichtigungs -API kann im Arbeitskript verwendet werden. Auf diese Weise können Sie Benachrichtigungen von Hintergrundaufgaben anzeigen, auch wenn die Hauptseite nicht im Fokus steht.

Das obige ist der detaillierte Inhalt vonAnzeige dynamischer Nachrichten mithilfe der Web -Benachrichtigungs -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!