Cómo enviar notificaciones push al navegador web?

Javier cubrió Notificaciones y limitaciones actuales.

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

Estas pueden ser la opción de reserva con el controlador de visualización de mensajes del cuadro de diálogo, para cuando falla una prueba de características de notificación o se deniega el permiso.

La notificación tiene-característica y verificación de permiso denegado:

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

GCM/APNS son solo para Chrome y Safari respectivamente.

Creo que usted puede estar buscando Notification:

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

Funciona en Chrome, Firefox, Opera y Safari .

Asumo que estás hablando de real notificaciones push que se pueden entregar incluso cuando el usuario no está navegando por su sitio web (de lo contrario, echa un vistazo a WebSockets o métodos heredados como long polling).

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

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

Si no es a través de GCM podemos tener nuestra propia 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, APNs, Mozilla push servers).

Divulgación: Yo soy el Pushpad fundador

Puede enviar datos desde el servidor al navegador a través de Server Side Events. Esta es esencialmente una secuencia unidireccional a la que un cliente puede "suscribirse" desde un navegador. Desde aquí, solo puede crear nuevos objetos Notification como flujo de SSEs en el 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 fundamentos de SSE y proporciona algunos ejemplos de código de servidor también.

Puedo redefinir su pregunta como abajo

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

Sí. Por 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. Eso es Push API protocolo por W3C. Pero Safari tienen su propia arquitectura antigua. Así que tenemos que mantenga Safari por separado.

Consulte browser-push repo para obtener líneas guía para implementar notificaciones push web para su aplicación web con su propio back-end. Explica con ejemplos cómo puede agregar soporte de notificaciones push web para su aplicación web sin ningún servicio de terceros.

A partir de ahora GCM solo funciona para chrome y Android. del mismo modo firefox y otros navegadores tienen su propia api.

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

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

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

3.Es necesario crear back-end que tiene campos para el 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 como send_push (). En esta escritura de código para diferentes navegadores por ejemplo

3.1. para chrome

 $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. Traté de usar ServiceWorkers y PushNotification desde el navegador sin embargo, sin embargo, cuando lo intenté webviews no era compatible con esto.

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

Esta es una forma sencilla 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();
}

});