Come inviare notifiche push al browser Web?

Ho letto per qualche ora l' API di notifica push e l' API di notifica web . Ho anche scoperto che Google e Apple offrono gratuitamente il servizio di notifica push tramite GCM e APNS.

Sto cercando di capire se siamo in grado di implementare la notifica push ai browser utilizzando Desktop Notification, che credo sia ciò che fa l'API di notifica Web. Ho visto una documentazione di Google su come questo può essere fatto per Chrome qui e qui .

Ciò che ancora non riesco a capire è:

1. Possiamo usare GCM / APNS per inviare notifiche push a tutti i browser Web, inclusi Firefox e Safari?
2. Se non tramite GCM, possiamo avere il nostro back-end per fare lo stesso?

Credo che tutte queste risposte in un'unica risposta possano aiutare molte persone che hanno confusioni simili.

Quindi qui sto rispondendo alla mia domanda. Ho ricevuto risposte a tutte le mie domande da persone che hanno creato servizi di notifica push in passato.

Aggiornamento (maggio 2018): ecco un documento completo e molto ben scritto sulla notifica push web da Google.

Rispondi alle domande originali poste 3 anni fa:

1. Possiamo usare GCM / APNS per inviare notifiche push a tutti i browser Web, inclusi Firefox e Safari?

Risposta: Google ha deprecato GCM ad aprile 2018. Ora puoi utilizzare Firebase Cloud Messaging (FCM). Questo supporta tutte le piattaforme, inclusi i browser Web.

2. Se non tramite GCM, possiamo avere il nostro back-end per fare lo stesso?

Risposta: Sì, la notifica push può essere inviata dal nostro back-end. Il supporto per lo stesso è arrivato a tutti i principali browser.

Controlla questo codelab da Google per comprendere meglio l'implementazione.

Alcuni tutorial:

• Implementazione della notifica push in Django Qui .
• Utilizzo del pallone per inviare notifiche push qui e qui .
• Invio notifica push da Nodejs Qui
• Invio di notifiche push tramite php Here & Here
• Invio di notifiche push da Wordpress. Qui e qui
• Invio di notifiche push da Drupal. Qui

Implementazione del proprio backend in vari linguaggi di programmazione .:

• NodeJs.
• PHP
• Rails
• Pitone
• Vai Lang - questo e questo

Ulteriori letture: - - La documentazione dal sito Web di Firefox può essere letta qui . - Un'ottima panoramica di Web Push di Google è disponibile qui. - Una FAQ che risponde alle confusioni e alle domande più comuni.

Ci sono servizi gratuiti per fare lo stesso? Ci sono alcune aziende che forniscono una soluzione simile in modelli gratuiti, freemium e a pagamento. Sto elencando alcuni di seguito:

1. https://onesignal.com/ (gratuito | supporta tutte le piattaforme)
2. https://firebase.google.com/products/cloud-messaging/ (gratuito)
3. https://clevertap.com/ (ha un piano gratuito)
4. https://goroost.com/

Nota: quando si sceglie un servizio gratuito ricordarsi di leggere il TOS. I servizi gratuiti spesso funzionano raccogliendo i dati degli utenti per vari scopi, tra cui l'analisi.

A parte questo, è necessario disporre di HTTPS per inviare notifiche push. Tuttavia, puoi ottenere https liberamente tramite letsencrypt.org

Javier ha coperto le notifiche e le attuali limitazioni.

Il mio consiglio: window.postMessagementre aspettiamo che il browser per handicappati raggiunga, altrimenti funzionerà Worker.postMessage()ancora con i Web Worker.

Possono essere l'opzione di fallback con il gestore di visualizzazione dei messaggi nella finestra di dialogo, per quando un test della funzione di notifica fallisce o viene negata l'autorizzazione.

Controllo delle funzionalità con notifica e autorizzazione negata:

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

È possibile inviare i dati dal server al browser tramite Server Side Events . Questo è essenzialmente un flusso unidirezionale a cui un client può "iscriversi" da un browser. Da qui, puoi semplicemente creare nuovi Notificationoggetti come flusso SSE nel browser:

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

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

Un po 'vecchio, ma questo articolo di Eric Bidelman spiega le basi di SSE e fornisce anche alcuni esempi di codice del server.

GCM / APNS sono solo per Chrome e Safari rispettivamente.

Penso che potresti essere alla ricerca di Notification:

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

Funziona in Chrome, Firefox, Opera e Safari .

Presumo che tu stia parlando di notifiche push reali che possono essere consegnate anche quando l'utente non naviga nel tuo sito Web (altrimenti controlla WebSocket o metodi legacy come il polling lungo).

Possiamo usare GCM / APNS per inviare notifiche push a tutti i browser Web, inclusi Firefox e Safari?

GCM è solo per Chrome e APN è solo per Safari. Ogni produttore di browser offre il proprio servizio.

Se non tramite GCM, possiamo avere il nostro back-end per fare lo stesso?

L'API Push richiede due backend ! Uno è offerto dal produttore del browser ed è responsabile della consegna della notifica al dispositivo. L'altro dovrebbe essere tuo (oppure puoi utilizzare un servizio di terze parti come Pushpad ) ed è responsabile per l'attivazione della notifica e per contattare il servizio del produttore del browser (ad esempio GCM, APN, server push Mozilla ).

Divulgazione: sono il fondatore del Pushpad

questo è un modo semplice per inviare notifiche push per tutti i browser https://pushjs.org

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

Posso ridefinire la tua domanda come di seguito

Possiamo avere il nostro back-end per inviare notifiche push a Chrome, Firefox, Opera e Safari?

Sì. A oggi (2017/05) , puoi utilizzare la stessa implementazione lato client e server per gestire Chrome, Firefox e Opera (no Safari). Perché hanno implementato le notifiche push Web allo stesso modo. Questo è il protocollo API Push di W3C. Ma Safari ha la sua vecchia architettura. Quindi dobbiamo mantenere Safari separatamente.

Fare riferimento al repository push browser per le linee guida per implementare la notifica push web per la propria app Web con il proprio back-end. Illustra con esempi come è possibile aggiungere il supporto per le notifiche push Web per l'applicazione Web senza servizi di terze parti.

A partire da ora GCM funziona solo per Chrome e Android. allo stesso modo Firefox e altri browser hanno le loro API.

Ora arriviamo alla domanda su come implementare la notifica push in modo che funzioni per tutti i browser comuni con il proprio back-end.

1. È necessario il codice dello script lato client, ad esempio il lavoratore dell'assistenza, fare riferimento ( notifica push di Google ). Anche se questo rimane lo stesso per altri browser.

2. dopo aver ottenuto l'endpoint utilizzando Ajax, salvarlo insieme al nome del browser.

3.È necessario creare un back-end che abbia campi per titolo, messaggio, icona, fare clic su URL in base alle proprie esigenze. ora dopo fai clic su invia notifica, chiama una funzione dire send_push (). In questo codice di scrittura per diversi browser, ad esempio

3.1. per cromo

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

per altri browser, google ...

Suggerisco di usare pubnub. Ho provato a utilizzare ServiceWorkers e PushNotification dal browser, tuttavia, quando l'ho provato, le visualizzazioni Web non lo supportavano.

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