Beteiligung der Benutzer an der Webanwendung verbessert: Detaillierte Erl?uterung von Web -Push -Benachrichtigungen

In diesem Artikel wird untersucht, wie die Benutzererfahrung vorhandener Webanwendungen verbessert werden kann, indem Benachrichtigungsfunktionen ?hnlich wie native Anwendungen hinzugefügt werden. Wir werden das Konzept von Web-Push-Benachrichtigungen ausführlich erl?utern und nach und nach zeigen, wie diese Funktion in vorhandene Webanwendungen integriert wird, wodurch die aktuelle Spezifikation und den Browserunterstützung behandelt werden. Der Artikel wurde ursprünglich in Sencha ver?ffentlicht. Vielen Dank an die Partner, die SitePoint unterstützen.

Kernpunkte:

• Verst?ndnis der Grundlagen: Web -Push -Benachrichtigungen erm?glichen Webanwendungen, Nachrichten direkt an Benutzerger?te zu senden, auch wenn die Anwendung inaktiv ist.
• Registrierung von Service Worker: Der Service Worker ist für die Behandlung von Push -Nachrichten verantwortlich, muss sich registrieren, wenn die Seite geladen wird, und führen Sie geeignete Browser -Support -überprüfungen durch.
• Benutzerabonnement -Abonnementprozess: Schlüsselschritte beim Empfangen von Push -Benachrichtigungen umfassen das Erhalten der Benutzereinwilligung, das Generieren von Push -Abonnements über einen Browser und das Senden dieser Daten an den Anwendungsserver.
• Senden Sie Push -Nachrichten: Push -Nachrichten sollten verschlüsselt und über HTTP -Postanforderungen gesendet werden und verwenden Sie Parameter wie TTL und Dringlichkeit, um Lieferdetails zu verwalten.
• Verarbeitungsnachricht und Benutzerinteraktion: Servicearbeiter eingehende Push -Nachrichten verarbeiten und Benutzerinteraktionen verwalten, z. B. Benachrichtigungsklicks und Schlie?ungen.
• Ablauf und Abonnement -Ablauf: bietet den Benutzern die Methoden zur unbemerkten Abonnements und Verarbeitung von Ereignissen für Abonnement -Lebenszyklus, einschlie?lich Ablauf und Erneuerung.

Web -Push -Benachrichtigungsprotokoll

Das Web -Push -Benachrichtigungsprotokoll ist relativ neu. Es bietet Webanwendungen eine native anwendungs?hnliche Funktionalit?t, mit der sie jederzeit Push-Nachrichten vom Server empfangen k?nnen, auch wenn die Webanwendung nicht aktiv oder in den Browser geladen ist. Auf diese Weise k?nnen Sie jederzeit mit Benutzern interagieren und sie dazu veranlassen, zur App zurückzukehren, auch wenn sie Ihre App nicht verwenden.

The commercial value of web push notifications is obvious: it can increase user engagement, thereby increasing the overall value of the application, because push notifications make your application more useful to users, improve the usability of web applications, and Machen Sie uns nützlicher für uns.

Vergleich von Web -Push und Websockets

Bevor wir uns mit den technischen Details befassen, verstehen wir zun?chst den Unterschied zwischen Web -Push und Websockets. Erstens haben sie einige gemeinsame Dinge: Web-Push und Websockets sind so konzipiert, dass sie eine Echtzeitkommunikation zwischen Webanwendungen und Anwendungsservern erm?glichen und Echtzeitdaten und Updates von Anwendungsservern an Webanwendungen senden.

Folgendes sind ihre Unterschiede:

• WebSockets Verwenden Sie nur, wenn die Webseite geladen und aktiv ist. Web -Push -Benachrichtigungen k?nnen jederzeit verwendet werden, einschlie?lich der aktiven, inaktiven oder entladenen App und wenn der Browser nicht aktiv oder sogar geschlossen ist.
• Die mit dem Web -Push gesendeten Daten müssen verschlüsselt werden, und die Gr??e jeder Nachricht ist begrenzt (nicht gr??er als 4 KB). Die Anzahl der gesendeten Nachrichten gibt auch Grenzen (der genaue Grenzwert h?ngt vom Browser ab). Einige Browser (wie Chrome) verlangen m?glicherweise auch, dass beim Empfangen einer Nachricht Benachrichtigungen an den Benutzer angezeigt werden. Wenn Sie WebSockets verwenden, haben Sie keine dieser Einschr?nkungen: Sie k?nnen eine beliebige Anzahl von unverschlüsselten Nachrichten in jeder Gr??e senden und sie nach Bedarf verarbeiten.
• Die allgemeinen Regeln lauten: Wenn der Benutzer mit der Anwendung interagiert, verwenden Sie WebSockets, um normale Datenaktualisierungen an Ihre Webanwendung zu senden. Ihre Bewerbung zu der Zeit.

Technisches Konzept

Schauen wir uns die technischen Details dieser Technologie an. Ich werde ein Spiel mit besonderen Regeln, Teilnehmern und Wendungen verwenden, um diese Details zu erkl?ren. Ich werde zuerst die Teilnehmer dieses Spiels namens "Web -Push -Benachrichtigungen" beschreiben:

• Webanwendung
• Servicearbeiter
• Browser
• Anwendungsserver
• Push Server

Push Server ist ein Dienst, der von Browserherstellern implementiert wird. Es ist verantwortlich für die Bereitstellung von Nachrichten von Ihrem Anwendungsserver an Ihren Browser.

Verwenden Sie das Web -Demo -Web -Push -Benachrichtigungen

Ich werde ein Spiel verwenden, um zu demonstrieren, wie Sie Ihrer App Web -Push -Benachrichtigungen hinzufügen. Die Regeln dieses Spiels werden durch mehrere Spezifikationen der World Wide Web Alliance und der Internet Engineering Task Force definiert:

• Kommunikation zwischen dem Browser und der damit verbundenen Webanwendung oder Servicearbeiter wird in der Push -API -Spezifikation beschrieben.
• Anzeigen verschiedener Arten von Benachrichtigungen und Benachrichtigungsverarbeitung wird in der API -Spezifikation von Benachrichtigungen beschrieben.
• Die Kommunikation zwischen dem Anwendungsserver und dem Push -Server ist in der Web -Push -Protokollspezifikation definiert.
• Es gibt auch einige zus?tzliche Spezifikationen, die die Authentifizierung von Push -Nachrichtenverschlüsselung und Anwendungsserver beschreiben, sodass Ihr Anwendungsserver nachweisen kann, dass Sie Nachrichten an Ihre Benutzer senden k?nnen.

Spielrunde

Ich habe das Spiel in vier Runden aufgeteilt und das Konzept und die Ziele jeder Runde erl?utert. Ich werde Ihnen dann zeigen, wie Sie jede Runde in Ihrer App implementieren.

Runde 1: Registrierung von Service Worker

Web -Push -Benachrichtigungen erfordern, dass ein Servicemitarbeiter Push -Nachrichten verarbeitet. Daher ist die erste Runde die Registrierung Ihres Serviceleisters. Nur Ihre Webanwendung und Ihr Browser nehmen an dieser Runde teil. Diese Runde tritt beim Laden der Seite auf.

Die Webanwendung sendet eine Anfrage zum Registrieren eines Serviceleisters an den Browser.

Um diese Runde zu implementieren, müssen Sie Ihrer Webanwendung den folgenden Code hinzufügen:

if ('serviceWorker' in navigator) {
  if ('PushManager' in window) {
    navigator.serviceWorker.register('ServiceWorker.js').then(function(registration) {
      // 狀態(tài)初始化
    }).catch(function() {
      // 錯誤處理
    });
  } else {
    // 錯誤處理
  }
} else {
  // 錯誤處理
}

Zun?chst müssen wir überprüfen, ob der Browser Servicearbeiter unterstützt. Anschlie?end müssen wir überprüfen, ob der Browser Web -Push -Benachrichtigungen unterstützt. Wenn die Browser -Unterstützung zunimmt, ist das Hinzufügen dieser beiden Schecks immer eine gute Idee.

Wenn beide unterstützt werden, registrieren wir uns für unsere Servicearbeiter. Zu diesem Zweck nennen wir den Navigator.Serviceworker Nach diesem Schritt l?dt der Browser die Datei herunter und führt sie in der Service Worker -Umgebung aus. Eine Service -Worker -Datei ist eine Standard -JavaScript -Datei, aber der Browser "Zugriff" auf die API für Service Worker, einschlie?lich Push.

Wenn alles gut l?uft und es keine Fehler gibt, wird das von Register () zurückgegebene Versprechen analysiert. Wenn ein Fehlertyp auftritt, wird das Versprechen abgelehnt, wir müssen uns mit dieser Situation und der Situation befassen, in der der Browser den Servicearbeiter nicht unterstützt. Wenn Register () analysiert, wird ein Serviceworkerregistrierungsobjekt zurückgegeben, das in der n?chsten Kurve verwendet wird.

(Die Anweisungen für nachfolgende Runden folgen einer ?hnlichen Struktur wie der oben genannten, einschlie?lich Codebeispiele, Bilder und Erkl?rungen und schreiben und polieren den Originaltext um, um die Integrit?t und Lesbarkeit der Information zu erhalten. Aufgrund von Platzbeschr?nkungen hier Es werden keine detaillierten Beschreibungen aller Runden erweitert

Web Push -Benachrichtigungstechnologie ist für die weit verbreitete Verwendung bereit. Es hilft Ihnen, effektiver mit Benutzern zu kommunizieren, Benutzer zu engagieren, indem Sie dringende und relevante Benachrichtigungen vorlegen, und es macht im Allgemeinen Webanwendungen besser.

Versuchen Sie, es in Ihrer App zu verwenden. Die Sencha CMD 6.5 unterstützt die folgenden progressiven Webanwendungsfunktionen: Hinzufügen zu Startbildschirmbannern und verwenden Sie den Cache der Servicearbeiter. Lesen Sie die Dokumentation von Sencha CMD, um weitere Informationen zu erhalten, oder laden Sie die kostenlose Testversion von Sencha Ext JS herunter, wo Sie Zugriff auf über 115 Komponenten und Tools, einschlie?lich Sencha CMD, zugreifen k?nnen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Push -Benachrichtigungen für Webanwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!