Como enviar notificação push para o navegador web?

Estas poderão ser a opção de recurso com o comando de visualização de mensagens na caixa de diálogo, para quando um teste de funcionalidade de notificação falhar ou a permissão for negada.

A notificação tem recurso e a verificação da autorização de recusa:

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

Os GCM / APNS são apenas para cromados e Safari, respectivamente.

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

Funciona em Chrome, Firefox, Opera e Safari .

Presumo que esteja a falar de Real 'push' notificações que podem ser entregues mesmo quando o utilizador não está a navegar no seu site (caso contrário, consulte WebSockets ou métodos antigos, como sondagens longas).

Podemos usar o GCM / APNS para enviar notificação push a todos os navegadores da Web, incluindo o Firefox & Safari?

O GCM é apenas para o cromado e o APNs é apenas para o Safari. Cada fabricante de navegador oferece seu próprio serviço.

Se não através da GCM podemos ter a nossa o próprio back-end para fazer o mesmo?

A API de empurrar requer duas infra-estruturas! Um deles é oferecido pelo fabricante do navegador e é responsável por entregar a notificação ao dispositivo. O outro deve ser seu (ou você pode usar um serviço de terceiros como Pushpad) e é responsável por desencadear a notificação e contactar o serviço do fabricante do navegador (ou seja, GCM, APNs, Mozilla push servers).

divulgação: eu sou o Pushpad fundador

Você pode enviar dados do servidor para o navegador através de eventos do lado do Servidor. Este é essencialmente um fluxo unidirecional que um cliente pode "subscrever" a partir de um navegador. A partir daqui, você pode apenas criar novos objetos Notification como fluxo de SSEs para o navegador:

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

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

Um pouco velho, mas este artigo de Eric Bidelman explica o básico do SSE e fornece alguns exemplos de código de servidor também.

Posso redefinir a sua pergunta Como Abaixo

Podemos ter o nosso próprio back-end para enviar uma notificação de push ao Chrome, Firefox, Opera & Safari?

Consulte browser-push repo para as linhas-guia para implementar Notificação Web push para a sua aplicação web com o seu próprio back-end. Ele explica com exemplos como você pode adicionar suporte de notificação Web push para sua aplicação web sem quaisquer serviços de terceiros.

Agora passando à questão de como implementar notificação push de modo que ele irá funcionar para todos os navegadores comuns com o próprio back end.

1. você precisa do código de script do lado do cliente,I. E. trabalhador do Serviço, veja (a notificação do Google push ). Embora isto continue a ser o mesmo para outros navegadores.

2.depois de obter o endpoint usando Ajax salve-o juntamente com o navegador nome.

3.Você precisa criar back end que tem campos para título,mensagem, ícone,clique em URL de acordo com suas necessidades. agora, depois de clicar em enviar notificação, chame uma função say send_push (). Neste código de escrita para diferentes navegadores, por exemplo

3.1. pelo cromado

 $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 outros navegadores, por favor procure no google...

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

Esta é uma forma simples de fazer a notificação de push para todo o navegador https://pushjs.org

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

});