¿Cómo enviar notificaciones push al navegador web?

He estado leyendo durante las últimas horas sobre la API de notificaciones push y la API de notificaciones web . También descubrí que Google y Apple ofrecen servicio de notificaciones push de forma gratuita a través de GCM y APNS respectivamente.

Estoy tratando de entender si podemos implementar notificaciones push en los navegadores usando la Notificación de escritorio, que creo que es lo que hace la API de notificación web. Vi una documentación de Google sobre cómo se puede hacer esto para Chrome aquí y aquí .

Ahora lo que aún no puedo entender es:

1. ¿Podemos usar GCM / APNS para enviar notificaciones push a todos los navegadores web, incluidos Firefox y Safari?
2. Si no es a través de GCM, ¿podemos tener nuestro propio back-end para hacer lo mismo?

Creo que todas estas respuestas en una sola respuesta pueden ayudar a muchas personas que tienen confusiones similares.

Entonces aquí estoy respondiendo mi propia pregunta. Tengo respuestas a todas mis consultas de personas que han creado servicios de notificación push en el pasado.

Actualización (mayo de 2018): aquí hay un documento completo y muy bien escrito sobre notificaciones push de Google.

Respuesta a las preguntas originales formuladas hace 3 años:

1. ¿Podemos usar GCM / APNS para enviar notificaciones push a todos los navegadores web, incluidos Firefox y Safari?

Respuesta: Google ha dejado de usar GCM a partir de abril de 2018. Ahora puede usar Firebase Cloud Messaging (FCM). Esto es compatible con todas las plataformas, incluidos los navegadores web.

2. Si no es a través de GCM, ¿podemos tener nuestro propio back-end para hacer lo mismo?

Respuesta: Sí, las notificaciones push se pueden enviar desde nuestro propio back-end. El soporte para el mismo ha llegado a todos los principales navegadores.

Consulte este codelab de Google para comprender mejor la implementación.

Algunos tutoriales:

• Implementando notificaciones push en Django aquí .
• Usando el matraz para enviar notificaciones push aquí y aquí .
• Envío de notificaciones push desde Nodejs Here
• Envío de notificaciones push usando php aquí y aquí
• Envío de notificaciones push desde Wordpress. Aquí y aquí
• Envío de notificaciones push desde Drupal. aquí

Implementación de backend propio en varios lenguajes de programación .:

• NodoJs.
• PHP
• Rieles
• Pitón
• Go Lang - esto y esto

Lecturas adicionales: - - La documentación del sitio web de Firefox se puede leer aquí . - Puede encontrar una muy buena descripción general de Web Push de Google aquí. - Preguntas frecuentes que responden a las confusiones y preguntas más comunes.

¿Hay servicios gratuitos para hacer lo mismo? Hay algunas compañías que ofrecen una solución similar en modelos gratuitos, gratuitos y de pago. Estoy enumerando algunos a continuación:

1. https://onesignal.com/ (Gratis | Admite todas las plataformas)
2. https://firebase.google.com/products/cloud-messaging/ (Gratis)
3. https://clevertap.com/ (tiene plan gratuito)
4. https://goroost.com/

Nota: Al elegir un servicio gratuito, recuerde leer los TOS. Los servicios gratuitos a menudo funcionan mediante la recopilación de datos del usuario para diversos fines, incluidos los análisis.

Además de eso, debe tener HTTPS para enviar notificaciones push. Sin embargo, puede obtener https libremente a través de letsencrypt.org

Javier cubrió Notificaciones y limitaciones actuales.

Mi sugerencia: window.postMessagemientras esperamos que el navegador para discapacitados se ponga al día, de lo contrario, Worker.postMessage()seguirá funcionando con Web Workers.

Estas pueden ser la opción alternativa con el controlador de visualización de mensajes del cuadro de diálogo, para cuando falla una prueba de función de Notificación o se deniega el permiso.

Notificación tiene verificación de características y permisos denegados:

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

Puede enviar datos del servidor al navegador a través de Eventos del lado del servidor . Esto es esencialmente una secuencia unidireccional a la que un cliente puede "suscribirse" desde un navegador. A partir de aquí, puede crear nuevos Notificationobjetos a medida que los SSE se transmiten al navegador:

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

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

Un poco viejo, pero este artículo de Eric Bidelman explica los conceptos básicos de SSE y también proporciona algunos ejemplos de código de servidor.

GCM / APNS son solo para Chrome y Safari respectivamente.

Creo que puedes estar buscando Notification:

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

Funciona en Chrome, Firefox, Opera y Safari .

Supongo que está hablando de notificaciones push reales que se pueden entregar incluso cuando el usuario no navega por su sitio web (de lo contrario, consulte WebSockets o métodos heredados como sondeos largos).

¿Podemos usar GCM / APNS para enviar notificaciones push a todos los navegadores web, incluidos Firefox y Safari?

GCM es solo para Chrome y APN es solo para Safari. Cada fabricante de navegadores ofrece su propio servicio.

Si no es a través de GCM, ¿podemos tener nuestro propio back-end para hacer lo mismo?

¡La API Push requiere dos backends ! Uno es ofrecido por el fabricante del navegador y es responsable de entregar la notificación al dispositivo. El otro debe ser suyo (o puede usar un servicio de terceros como Pushpad ) y es responsable de activar la notificación y ponerse en contacto con el servicio del fabricante del navegador (es decir, GCM, APN, servidores push de Mozilla ).

Divulgación: soy el fundador de Pushpad

esta es una manera simple de hacer notificaciones push para todos los navegadores https://pushjs.org

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

¿Puedo redefinir su pregunta de la siguiente manera?

¿Podemos tener nuestro propio back-end para enviar notificaciones push a Chrome, Firefox, Opera y Safari?

Si. Para hoy (2017/05) , puede usar la misma implementación del lado del cliente y del servidor para manejar Chrome, Firefox y Opera (sin Safari). Porque han implementado notificaciones push web de la misma manera. Ese es el protocolo Push API de W3C. Pero Safari tiene su propia arquitectura antigua. Entonces tenemos que mantener Safari por separado.

Consulte el repositorio de inserción de navegador para obtener pautas para implementar la notificación de inserción web para su aplicación web con su propio back-end. Explica con ejemplos cómo puede agregar soporte de notificación push web para su aplicación web sin ningún servicio de terceros.

A partir de ahora, GCM solo funciona para Chrome y Android. De manera similar, Firefox y otros navegadores tienen su propia API.

Ahora viene a la pregunta de cómo implementar notificaciones push para que funcione para todos los navegadores comunes con back-end propio.

1. Necesita el código de script del lado del cliente, es decir, trabajador de servicio, consulte ( notificación push de Google ) Aunque esto sigue siendo igual para otros navegadores.

2. después de obtener el punto final usando Ajax guárdelo junto con el nombre del navegador.

3.Debe crear un back-end que tenga campos para título, mensaje, icono, haga clic en URL según sus requisitos. ahora, después de hacer clic en enviar notificación, llame a una función, digamos send_push (). En este código de escritura para diferentes navegadores, por ejemplo

3.1. para 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. para 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);

para otros navegadores por favor google ...

Sugiero usar pubnub. Sin embargo, intenté usar ServiceWorkers y PushNotification desde el navegador, sin embargo, cuando lo intenté, las vistas web no lo admitían.

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