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!