Wie sende ich eine Push-Benachrichtigung an den Webbrowser?

Ich habe in den letzten Stunden über die Push-Benachrichtigungs-API und die Web-Benachrichtigungs-API gelesen . Ich habe auch festgestellt, dass Google und Apple einen kostenlosen Push-Benachrichtigungsdienst über GCM bzw. APNS anbieten.

Ich versuche zu verstehen, ob wir Push-Benachrichtigungen für Browser mithilfe der Desktop-Benachrichtigung implementieren können. Ich glaube, das ist die Funktion der Web-Benachrichtigungs-API. Ich habe hier und hier eine Google-Dokumentation darüber gesehen, wie dies für Chrome gemacht werden kann .

Was ich jetzt noch nicht verstehen kann, ist:

1. Können wir GCM / APNS verwenden, um Push-Benachrichtigungen an alle Webbrowser einschließlich Firefox & Safari zu senden?
2. Wenn nicht über GCM, können wir dann unser eigenes Back-End haben, um dasselbe zu tun?

Ich glaube, all diese Antworten in einer Antwort können vielen Menschen helfen, die ähnliche Verwirrungen haben.

Hier beantworte ich meine eigene Frage. Ich habe Antworten auf alle meine Fragen von Personen erhalten, die in der Vergangenheit Push-Benachrichtigungsdienste eingerichtet haben.

Update (Mai 2018): Hier ist ein umfassendes und sehr gut geschriebenes Dokument zur Web-Push-Benachrichtigung von Google.

Antwort auf die ursprünglichen Fragen, die vor 3 Jahren gestellt wurden:

1. Können wir GCM / APNS verwenden, um Push-Benachrichtigungen an alle Webbrowser einschließlich Firefox & Safari zu senden?

Antwort: Google hat GCM ab April 2018 abgelehnt. Sie können jetzt Firebase Cloud Messaging (FCM) verwenden. Dies unterstützt alle Plattformen einschließlich Webbrowsern.

2. Wenn nicht über GCM, können wir dann unser eigenes Back-End haben, um dasselbe zu tun?

Antwort: Ja, Push-Benachrichtigungen können von unserem eigenen Back-End gesendet werden. Dies wird von allen gängigen Browsern unterstützt.

Überprüfen Sie dieses Codelab von Google, um die Implementierung besser zu verstehen.

Einige Tutorials:

• Push-Benachrichtigung in Django implementieren Hier .
• Verwenden der Flasche zum Senden der Push-Benachrichtigung Here & Here .
• Senden von Push-Benachrichtigungen von Nodejs Here
• Senden einer Push-Benachrichtigung mit PHP Here & Here
• Senden einer Push-Benachrichtigung von Wordpress. Hier und hier
• Senden einer Push-Benachrichtigung von Drupal. Hier

Implementierung eines eigenen Backends in verschiedenen Programmiersprachen:

• NodeJs.
• PHP
• Schienen
• Python
• Go Lang - dies und das

Weitere Lesungen: - - Die Dokumentation von der Firefox-Website kann hier gelesen werden . - Eine sehr gute Übersicht über Web Push von Google finden Sie hier. - Eine FAQ zur Beantwortung der häufigsten Verwirrungen und Fragen.

Gibt es kostenlose Dienste, um dasselbe zu tun? Es gibt einige Unternehmen, die eine ähnliche Lösung für kostenlose, Freemium- und kostenpflichtige Modelle anbieten. Ich liste unten einige auf:

1. https://onesignal.com/ (Kostenlos | Alle Plattformen unterstützen)
2. https://firebase.google.com/products/cloud-messaging/ (kostenlos)
3. https://clevertap.com/ (Hat freien Plan)
4. https://goroost.com/

Hinweis: Denken Sie bei der Auswahl eines kostenlosen Dienstes daran, die Nutzungsbedingungen zu lesen. Kostenlose Dienste erfassen häufig Benutzerdaten für verschiedene Zwecke, einschließlich Analysen.

Abgesehen davon benötigen Sie HTTPS, um Push-Benachrichtigungen zu senden. Sie können https jedoch frei über letsencrypt.org erhalten

Javier behandelte Benachrichtigungen und aktuelle Einschränkungen.

Mein Vorschlag: window.postMessageWährend wir darauf warten, dass der behinderte Browser aufholt, arbeiten wir Worker.postMessage()weiterhin mit Web Workern.

Dies kann die Fallback-Option mit dem Handler für die Anzeige von Dialogfeldnachrichten sein, wenn ein Test der Benachrichtigungsfunktion fehlschlägt oder die Berechtigung verweigert wird.

Überprüfung der Benachrichtigungsfunktion und Verweigerung der Berechtigung:

if (!("Notification" in window) || (Notification.permission === "denied") ) {
    // use (window||Worker).postMessage() fallback ...
}

Sie können Daten vom Server über serverseitige Ereignisse an den Browser senden . Dies ist im Wesentlichen ein unidirektionaler Stream, den ein Client über einen Browser "abonnieren" kann. Von hier aus können Sie einfach neue NotificationObjekte erstellen , während SSEs in den Browser streamen:

var source = new EventSource('/events');

source.on('message', message => {
  var notification = new Notification(message.title, {
    body: message.body
  });
}); 

Ein bisschen alt, aber dieser Artikel von Eric Bidelman erklärt die Grundlagen von SSE und enthält auch einige Beispiele für Servercode .

GCM / APNS gelten nur für Chrome bzw. Safari.

Ich denke, Sie suchen vielleicht Notification:

https://developer.mozilla.org/en-US/docs/Web/API/notification

Es funktioniert in Chrome, Firefox, Opera und Safari .

Ich gehe davon aus, dass es sich um echte Push-Benachrichtigungen handelt, die auch dann zugestellt werden können, wenn der Benutzer nicht auf Ihrer Website surft (andernfalls sollten Sie sich WebSockets oder ältere Methoden wie lange Abfragen ansehen).

Können wir GCM / APNS verwenden, um Push-Benachrichtigungen an alle Webbrowser einschließlich Firefox & Safari zu senden?

GCM ist nur für Chrome und APNs nur für Safari. Jeder Browserhersteller bietet seinen eigenen Service an.

Wenn nicht über GCM, können wir dann unser eigenes Back-End haben, um dasselbe zu tun?

Die Push-API benötigt zwei Backends ! Eine wird vom Browserhersteller angeboten und ist für die Zustellung der Benachrichtigung an das Gerät verantwortlich. Der andere sollte Ihnen gehören (oder Sie können einen Drittanbieter-Dienst wie Pushpad verwenden ) und ist für das Auslösen der Benachrichtigung und die Kontaktaufnahme mit dem Dienst des Browserherstellers (z. B. GCM, APNs, Mozilla-Push-Server ) verantwortlich.

Offenlegung: Ich bin der Pushpad-Gründer

Dies ist eine einfache Möglichkeit, Push-Benachrichtigungen für alle Browser https://pushjs.org durchzuführen

Push.create("Hello world!", {
body: "How's it hangin'?",
icon: '/icon.png',
timeout: 4000,
onClick: function () {
    window.focus();
    this.close();
 }
});

Darf ich Ihre Frage wie folgt neu definieren?

Können wir ein eigenes Back-End haben, um Push-Benachrichtigungen an Chrome, Firefox, Opera & Safari zu senden?

Ja. Bis heute (2017/05) können Sie dieselbe clientseitige und serverseitige Implementierung für Chrome, Firefox und Opera verwenden (keine Safari). Weil sie Web-Push-Benachrichtigungen auf die gleiche Weise implementiert haben. Das ist das Push-API- Protokoll von W3C. Aber Safari hat seine eigene alte Architektur. Wir müssen Safari also separat warten.

Im Browser-Push- Repo finden Sie Richtlinien zum Implementieren der Web-Push-Benachrichtigung für Ihre Web-App mit Ihrem eigenen Back-End. Anhand von Beispielen wird erläutert, wie Sie die Unterstützung für Web-Push-Benachrichtigungen für Ihre Webanwendung ohne Dienste von Drittanbietern hinzufügen können.

Ab sofort funktioniert GCM nur noch für Chrome und Android. Ebenso haben Firefox und andere Browser ihre eigene API.

Kommen wir nun zu der Frage, wie Push-Benachrichtigungen implementiert werden, damit sie für alle gängigen Browser mit eigenem Back-End funktionieren.

1. Sie benötigen clientseitigen Skriptcode, z. B. Service Worker (siehe Google Push-Benachrichtigung ). Dies gilt jedoch auch für andere Browser.

2. Nachdem Sie den Endpunkt mit Ajax erhalten haben, speichern Sie ihn zusammen mit dem Browsernamen.

3. Sie müssen ein Back-End erstellen, das Felder für Titel, Nachricht, Symbol und URL gemäß Ihren Anforderungen enthält. Rufen Sie nun nach dem Klicken auf Benachrichtigung senden eine Funktion wie send_push () auf. In diesem Code schreiben Sie zum Beispiel für verschiedene Browser

3.1. für Chrom

 $headers = array(
          'Authorization: key='.$api_key(your gcm key),
          'Content-Type: application/json',
     );
   $msg = array('to'=>'register id saved to your server');
   $url = 'https://android.googleapis.com/gcm/send';
   $ch = curl_init();

      // Set the url, number of POST vars, POST data
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_POST, true);
      curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
      curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($msg));

      $result = curl_exec($ch);

3.2. für Mozilla

$headers = array(            
              'Content-Type: application/json',
              'TTL':6000
            );

       $url = 'https://updates.push.services.mozilla.com/wpush/v1/REGISTER_ID_TO SEND NOTIFICATION_ON';

      $ch = curl_init();

      // Set the url, number of POST vars, POST data
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_POST, true);
      curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);


      $result = curl_exec($ch);

für andere Browser bitte googeln ...

Ich schlage vor, Pubnub zu verwenden. Ich habe versucht, ServiceWorkers und PushNotification über den Browser zu verwenden, aber als ich es versuchte, haben Webviews dies nicht unterstützt.

https://www.pubnub.com/docs/web-javascript/pubnub-javascript-sdk