So erstellen Sie Push -Benachrichtigungen für Webanwendungen

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) {
      // 状态初始化
    }).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

Zusammenfassung

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.

(Der FAQS -Abschnitt erfordert auch ein ähnliches Umschreiben und Polieren und wird hier nicht erweitert.)

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!