Jak wysłać powiadomienie push do przeglądarki internetowej?

Czytałem od kilku godzin o Push Notification API i Web Notification API . Odkryłem również, że Google i Apple zapewniają usługę powiadomień wypychanych za darmo za pośrednictwem odpowiednio GCM i APNS.

Próbuję zrozumieć, czy możemy zaimplementować powiadomienie wypychane w przeglądarkach za pomocą Desktop Notification, które moim zdaniem jest tym, co robi interfejs API Web Notification. Widziałem dokumentację Google, jak to zrobić w Chrome tutaj i tutaj .

Teraz nadal nie jestem w stanie zrozumieć:

1. Czy możemy używać GCM / APNS do wysyłania powiadomień push do wszystkich przeglądarek internetowych, w tym Firefox i Safari?
2. Jeśli nie za pośrednictwem GCM, czy możemy mieć własne zaplecze, aby zrobić to samo?

Wierzę, że wszystkie te odpowiedzi w jednej odpowiedzi mogą pomóc wielu ludziom, którzy mają podobne zamieszanie.

Odpowiadam więc na własne pytanie. Mam odpowiedzi na wszystkie moje pytania od osób, które w przeszłości budowały usługi powiadomień wypychanych.

Aktualizacja (maj 2018 r.): Oto obszerny i bardzo dobrze napisany dokument Google dotyczący powiadomień wypychanych w sieci.

Odpowiedz na oryginalne pytania zadane 3 lata temu:

1. Czy możemy używać GCM / APNS do wysyłania powiadomień push do wszystkich przeglądarek internetowych, w tym Firefox i Safari?

Odpowiedź: Google wycofało GCM z kwietnia 2018 r. Możesz teraz korzystać z Firebase Cloud Messaging (FCM). Obsługuje wszystkie platformy, w tym przeglądarki internetowe.

2. Jeśli nie za pośrednictwem GCM, czy możemy mieć własne zaplecze, aby zrobić to samo?

Odpowiedź: Tak, powiadomienia push mogą być wysyłane z naszego zaplecza. Obsługa tego samego dotyczy wszystkich głównych przeglądarek.

Sprawdź ten kodelab od Google, aby lepiej zrozumieć implementację.

Niektóre samouczki:

• Wdrażanie powiadomień wypychanych w Django Tutaj .
• Używanie kolby do wysyłania powiadomień push Tu i Tutaj .
• Wysyłanie powiadomienia push z Nodejs tutaj
• Wysyłanie powiadomienia wypychanego za pomocą php Tu i Tutaj
• Wysyłanie powiadomienia push z Wordpress. Tu i tutaj
• Wysyłanie powiadomienia push od Drupala. Tutaj

Wdrażanie własnego zaplecza w różnych językach programowania .:

• NodeJs.
• PHP
• Szyny
• Pyton
• Go Lang - to i to

Dalsze lektury: - - Dokumentację ze strony Firefox można przeczytać tutaj . - Bardzo dobry przegląd Google Push przez Google można znaleźć tutaj. - FAQ odpowiadające na najczęstsze nieporozumienia i pytania.

Czy są jakieś bezpłatne usługi, aby zrobić to samo? Niektóre firmy oferują podobne rozwiązanie w modelach darmowych, freemium i płatnych. Wymieniam kilka poniżej:

1. https://onesignal.com/ (bezpłatny | Obsługa wszystkich platform)
2. https://firebase.google.com/products/cloud-messaging/ (bezpłatny)
3. https://clevertap.com/ (Posiada bezpłatny plan)
4. https://goroost.com/

Uwaga: Wybierając bezpłatną usługę, pamiętaj, aby przeczytać Warunki świadczenia usługi. Darmowe usługi często działają poprzez zbieranie danych użytkownika do różnych celów, w tym do analizy.

Oprócz tego musisz mieć HTTPS, aby wysyłać powiadomienia wypychane. Możesz jednak uzyskać https za darmo za pośrednictwem letsencrypt.org

Javier obejmował Powiadomienia i aktualne ograniczenia.

Moja sugestia: window.postMessagepodczas gdy czekamy, aż upośledzona przeglądarka nadrobi zaległości, Worker.postMessage()w przeciwnym razie nadal będzie działać z pracownikami sieci Web.

Mogą to być opcje rezerwowe z obsługą wyświetlania komunikatów w oknie dialogowym, na wypadek, gdy test funkcji powiadomienia zakończy się niepowodzeniem lub odmowa dostępu.

Powiadomienie ma funkcję i kontrolę odmowy uprawnień:

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

Możesz przesyłać dane z serwera do przeglądarki za pośrednictwem zdarzeń po stronie serwera . Jest to zasadniczo jednokierunkowy strumień, do którego klient może „subskrybować” z przeglądarki. Stąd możesz po prostu tworzyć nowe Notificationobiekty jako strumień SSE do przeglądarki:

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

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

Trochę stary, ale w tym artykule Erica Bidelmana wyjaśniono podstawy SSE i podano również przykłady kodu serwera.

GCM / APNS są dostępne tylko odpowiednio dla Chrome i Safari.

Myślę, że możesz szukać Notification:

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

Działa w Chrome, Firefox, Opera i Safari .

Zakładam, że mówisz o prawdziwych powiadomieniach wypychanych, które mogą być dostarczane, nawet gdy użytkownik nie surfuje po Twojej witrynie (w przeciwnym razie sprawdź WebSockets lub starsze metody, takie jak długie odpytywanie).

Czy możemy używać GCM / APNS do wysyłania powiadomień push do wszystkich przeglądarek internetowych, w tym Firefox i Safari?

GCM jest tylko dla Chrome, a APN tylko dla Safari. Każdy producent przeglądarki oferuje własną usługę.

Jeśli nie za pośrednictwem GCM, czy możemy mieć własne zaplecze, aby zrobić to samo?

Push API wymaga dwóch backendów ! Jeden jest oferowany przez producenta przeglądarki i jest odpowiedzialny za dostarczenie powiadomienia do urządzenia. Drugi powinien należeć do Ciebie (lub możesz skorzystać z usługi strony trzeciej, takiej jak Pushpad ) i jest odpowiedzialny za wywołanie powiadomienia i skontaktowanie się z usługą producenta przeglądarki (tj. GCM, APN, serwery push Mozilla ).

Ujawnienie: Jestem założycielem Pushpad

jest to prosty sposób na powiadomienie push dla wszystkich przeglądarek https://pushjs.org

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

Czy mogę przedefiniować twoje pytanie, jak poniżej

Czy możemy mieć własne zaplecze do wysyłania powiadomień push do Chrome, Firefox, Opera i Safari?

Tak. Do dziś (2017/05) możesz używać tej samej implementacji po stronie klienta i serwera do obsługi Chrome, Firefox i Opera (bez Safari). Ponieważ w ten sam sposób wdrożyli internetowe powiadomienia wypychane. To jest protokół Push API firmy W3C. Ale Safari ma swoją starą architekturę. Dlatego musimy oddzielnie obsługiwać Safari.

Zapoznaj się z repozytorium wypychania przeglądarki, aby uzyskać informacje na temat wdrażania powiadomień wypychanych dla aplikacji sieci Web z własnym zapleczem. Wyjaśnia na przykładach, w jaki sposób można dodać obsługę powiadomień wypychanych z sieci dla aplikacji internetowej bez żadnych usług stron trzecich.

Na razie GCM działa tylko na Chrome i Androidzie. podobnie Firefox i inne przeglądarki mają własne API.

Teraz nadchodzi pytanie, jak zaimplementować powiadomienia wypychane, aby działało ono we wszystkich popularnych przeglądarkach z własnym zapleczem.

1. Potrzebujesz kodu skryptu po stronie klienta, tj. Pracownika serwisu, skieruj ( powiadomienie push Google ). Chociaż pozostaje tak samo w przypadku innych przeglądarek.

2. po uzyskaniu punktu końcowego za pomocą Ajax zapisz go wraz z nazwą przeglądarki.

3. Musisz utworzyć zaplecze, które ma pola na tytuł, wiadomość, ikonę, kliknij URL zgodnie z wymaganiami. teraz po kliknięciu na wyślij powiadomienie, wywołaj funkcję powiedz send_push (). W tym kodzie pisz na przykład dla różnych przeglądarek

3.1 dla chromu

 $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 dla mozilli

$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);

w przypadku innych przeglądarek proszę google ...

Sugeruję użycie pubnub. Próbowałem jednak korzystać z ServiceWorkers i PushNotification z przeglądarki, jednak kiedy próbowałem, webviews tego nie obsługiwał.

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