Como enviar uma notificação por push para o navegador da web?

Eu tenho lido há algumas horas sobre a API de notificação por push e a API de notificação da Web . Eu também descobri que o Google e a Apple oferecem serviço de notificação por push gratuitamente via GCM e APNS, respectivamente.

Estou tentando entender se podemos implementar a notificação por push nos navegadores usando a Notificação da área de trabalho, que acredito ser o que a API de notificação da Web faz. Vi uma documentação do Google sobre como isso pode ser feito para o Chrome aqui e aqui .

Agora, o que ainda não consigo entender é:

1. Podemos usar o GCM / APNS para enviar notificações por push a todos os navegadores da Web, incluindo Firefox e Safari?
2. Caso contrário, por meio do GCM, podemos ter nosso próprio back-end para fazer o mesmo?

Acredito que todas essas respostas em uma resposta podem ajudar muitas pessoas que estão tendo confusões semelhantes.

Então, aqui estou respondendo minha própria pergunta. Recebi respostas para todas as minhas perguntas de pessoas que criaram serviços de notificação por push no passado.

Atualização (maio de 2018): aqui está um documento abrangente e muito bem escrito sobre a notificação por push da Web do Google.

Responda às perguntas originais feitas há 3 anos:

1. Podemos usar o GCM / APNS para enviar notificações por push a todos os navegadores da Web, incluindo Firefox e Safari?

Resposta: o Google descontinuou o GCM em abril de 2018. Agora você pode usar o Firebase Cloud Messaging (FCM). Isso suporta todas as plataformas, incluindo navegadores da web.

2. Caso contrário, por meio do GCM, podemos ter nosso próprio back-end para fazer o mesmo?

Resposta: Sim, a notificação por push pode ser enviada de nosso próprio back-end. Suporte para o mesmo chegou a todos os principais navegadores.

Verifique este codelab do Google para entender melhor a implementação.

Alguns tutoriais:

• Implementando a notificação por push no Django aqui .
• Usando o balão para enviar notificações por push aqui e aqui .
• Enviando notificação por push a partir de Nodejs Aqui
• Enviando notificação push usando php Here & Here
• Enviando notificação push do Wordpress. Aqui e Aqui
• Enviando notificação push do Drupal. Aqui

Implementando o próprio back-end em várias linguagens de programação .:

• NodeJs.
• PHP
• Trilhos
• Pitão
• Vai Lang - isso e isso

Leituras adicionais: - - A documentação do site do Firefox pode ser lida aqui . - Uma excelente visão geral do Web Push by Google pode ser encontrada aqui. - Um FAQ respondendo às confusões e perguntas mais comuns.

Existem serviços gratuitos para fazer o mesmo? Existem algumas empresas que oferecem uma solução semelhante nos modelos grátis, freemium e pago. Estou listando alguns abaixo:

1. https://onesignal.com/ (Grátis | Suporte todas as plataformas)
2. https://firebase.google.com/products/cloud-messaging/ (Grátis)
3. https://clevertap.com/ (possui plano gratuito)
4. https://goroost.com/

Nota: Ao escolher um serviço gratuito, lembre-se de ler os Termos de Serviço. Os serviços gratuitos geralmente funcionam coletando dados do usuário para vários propósitos, incluindo análises.

Além disso, você precisa ter HTTPS para enviar notificações por push. No entanto, você pode obter https gratuitamente através do letsencrypt.org

Javier cobriu as Notificações e as limitações atuais.

Minha sugestão: window.postMessageenquanto esperamos o navegador para deficientes, mais Worker.postMessage()ainda continuamos operando com Web Workers.

Pode ser a opção de fallback com o manipulador de exibição de mensagens da caixa de diálogo, para quando um teste de recurso de notificação falha ou a permissão é negada.

Notificação com recurso e verificação de permissão negada:

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

Você pode enviar dados do servidor para o navegador via Eventos do lado do servidor . Este é essencialmente um fluxo unidirecional no qual um cliente pode "se inscrever" em um navegador. A partir daqui, você pode simplesmente criar novos Notificationobjetos à medida que os SSEs fluem para o navegador:

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

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

Um pouco antigo, mas este artigo de Eric Bidelman explica os conceitos básicos do SSE e também fornece alguns exemplos de código de servidor.

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

Eu acho que você pode estar procurando Notification:

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

Funciona no Chrome, Firefox, Opera e Safari .

Suponho que você esteja falando de notificações push reais que podem ser entregues mesmo quando o usuário não está navegando em seu site (caso contrário, consulte WebSockets ou métodos herdados, como pesquisas longas).

Podemos usar o GCM / APNS para enviar notificações por push a todos os navegadores da Web, incluindo Firefox e Safari?

O GCM é apenas para Chrome e os APNs são apenas para Safari. Cada fabricante do navegador oferece seu próprio serviço.

Caso contrário, por meio do GCM, podemos ter nosso próprio back-end para fazer o mesmo?

A API Push requer dois back-ends ! Um é 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 o Pushpad ) e é responsável por acionar a notificação e entrar em contato com o serviço do fabricante do navegador (por exemplo, GCM, APNs, servidores de envio Mozilla ).

Divulgação: Eu sou o fundador do Pushpad

Esta é uma maneira simples de enviar notificações por push para todos os navegadores https://pushjs.org

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

Posso redefinir sua pergunta como abaixo

Podemos ter nosso próprio back-end para enviar notificações push para o Chrome, Firefox, Opera e Safari?

Sim. Até hoje (2017/05) , você pode usar a mesma implementação do lado do cliente e do servidor para lidar com o Chrome, Firefox e Opera (sem Safari). Porque eles implementaram as notificações por push da Web da mesma maneira. Esse é o protocolo Push API do W3C. Mas o Safari tem sua própria arquitetura antiga. Portanto, temos que manter o Safari separadamente.

Consulte o repositório de envio por push do navegador para obter linhas de guia para implementar a notificação por push da web para seu aplicativo da web com seu próprio backend. Ele explica com exemplos como você pode adicionar suporte à notificação por push da web para seu aplicativo da web sem serviços de terceiros.

A partir de agora, o GCM funciona apenas para Chrome e Android. Da mesma forma, o Firefox e outros navegadores têm sua própria API.

Agora, vamos à questão de como implementar a notificação por push para que ele funcione para todos os navegadores comuns com back-end próprio.

1. Você precisa do código de script do lado do cliente, ou seja, técnico de serviço, consulte ( notificação push do Google ). Embora isso permaneça o mesmo para outros navegadores.

2. Após obter o endpoint usando o Ajax, salve-o juntamente com o nome do navegador.

3.Você precisa criar um back-end com campos para título, mensagem, ícone e clicar em URL conforme seus requisitos. Agora, depois de clicar em enviar notificação, chame uma função como send_push (). Neste código de gravação para diferentes navegadores, por exemplo

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 outros navegadores, pesquise no google ...

Eu sugiro usar o pubnub. No entanto, tentei usar o ServiceWorkers e o PushNotification no navegador, no entanto, quando tentei, as visualizações da Web não suportaram isso.

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