Como enviar notificações push da Web usando o Firebase (FCM)?

Publicados: 2021-12-29

Para facilitar seus serviços de notificação na Web, IOS e Android, o Firebase usa serviços em nuvem. O Firebase Cloud Messaging (FCM) opera gerando tokens exclusivos para cada dispositivo e, posteriormente, usando-os para enviar mensagens aos respectivos dispositivos. Para enviar notificações push da Web , o Firebase gera tokens usando javascript.

Neste blog, você conhecerá tudo sobre como implementar notificações push da web firebase .

O que são mensagens na nuvem do Firebase?

O que é Firebase-Cloud-Messaging

O Firebase Cloud Messaging é o serviço de notificação móvel gratuito do Google. Ele permite que desenvolvedores de aplicativos de terceiros enviem notificações para seus usuários dos servidores do Google Cloud Messaging (GCM). Isso permite que você informe os usuários sobre vários dados disponíveis para sincronização em tempo real.

Ele envia mensagens de aplicativos de usuários para servidores FCM e mensagens de downstream de servidores FCM para aplicativos de usuários e. Você pode usar o FCM para envolver, reter e redirecionar seus usuários, independentemente de onde eles estejam no mundo.

Quais são os benefícios de enviar notificações push da Web usando o Firebase?

Veja a seguir os benefícios de enviar notificações push da Web do firebase .

  • Gratuito para começar: você não precisa pagar ao Google para aproveitar o FCM serviço de notificação push. Além disso, é fácil de escalar.  
  • Não se preocupe com permissões: como as bibliotecas do FCM usam mesclagem de manifesto, ela adiciona automaticamente qualquer permissão necessária. Isso diminui a quantidade de esforço que você precisa fazer.
  • Registro simplificado: o endereço que o FCM utiliza para entregar a mensagem a um dispositivo é chamado de “token de registro”. Este processo agora foi feito assíncrono. A biblioteca do Google recebe automaticamente um token em seu nome. Então, quando você solicita um token, você recebe um token de registro. Para começar a enviar mensagens, você só precisa enviar esse token para seus servidores.
  • Fácil implementação: A implementação do FCM é rápida e fácil. Como suas APIs intuitivas estão disponíveis em um único SDK, você pode resolver os problemas dos clientes imediatamente sem criar infraestrutura complicada.
  • Analytics: você obtém análises ilimitadas gratuitamente do Firebase. Você obtém dados valiosos sobre o uso de aplicativos de seus usuários, cliques em anúncios e muito mais. Outros recursos do Firebase funcionam bem com o Firebase Analytics. Então, você pode agir em tudo.
  • Suporte entre plataformas: como as APIs estão disponíveis em um único SDK para C++, JavaScript, Android e iOS, você pode estendê-lo para várias plataformas sem alterar sua infraestrutura.
  • Mensagens de tópicos comuns: quando você deseja notificar os usuários interessados ​​em um determinado tópico, basta publicar sua mensagem no FCM. O FCM o entregará a todos os usuários que se inscreveram nesse tópico. A melhor coisa é que ele não tem limites para mensagens de tópicos.
  • Mensagens de tópicos diferentes: o FCM também permite a segmentação de clientes para enviar mensagens relevantes. Por exemplo, se você estiver enviando notificações relacionadas ao trânsito para seus usuários, os usuários da cidade A receberão mensagens de trânsito referentes apenas à cidade deles, e os usuários da cidade B receberão mensagens de trânsito relacionadas apenas à cidade.

Como enviar notificações push da Web usando o Firebase?

Aqui estão as instruções passo a passo para ajudar você a implementar as notificações push da Web do Firebase .

1. Registre o aplicativo Firebase

Register-Firebase-App
  1. Visite este link https://console.firebase.google.com/u/0/ e pressione a guia 'Adicionar projeto'.
  2. Dê um nome de projeto e selecione o país. Em seguida, pressione a guia 'Criar projeto'. O Google verificará a disponibilidade e exclusividade do nome do projeto.
  3. Agora clique na guia 'aceitar termos e condições' para continuar. Seu projeto será construído dentro
  4. alguns segundos.
  5. Agora adicione seu aplicativo Android/IOS/Web/Unity ao seu projeto. Como este blog se concentra nas notificações push da Web Firebase , você precisa continuar clicando no ícone da Web mostrado como </>.
  6. Dê um apelido ao seu aplicativo. Este apelido é apenas para usuários. Assim, você pode usar esse recurso para facilitar a melhor diferenciação entre os aplicativos em um projeto para uso interno.
  7. Se seu projeto não estiver sendo executado em um servidor HTTPS, adicione hospedagem para ele. Se não, basta pular esta etapa.
  8. Agora clique em 'Registrar aplicativo'.  
  9. Agora que seu aplicativo está registrado, você receberá um SDK do Firebase, que é um código. Copie esse código

baixa. Ele entrará em uso na próxima seção. Caso você não copie isso agora, você pode recuperá-lo na seção 'Configurações'.

2. Adicione o Firebase ao seu projeto

Adicionar-firebase-ao-seu-projeto
  1. Vá para o painel. Na barra lateral, você encontrará o ícone 'Configurações'. Clique nisso. No menu apresentado, clique em configurações do projeto.
  2. Quando a página Configurações (Configurações Gerais) for aberta, role para baixo até o final da página e copie o código mostrado para o CDN selecionado.
  3. Inclua o seguinte código em seu arquivo HTML no final. Inclua também o script CDN para mensagens do Firebase.

< script src = “https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js” > </script>

<script src = “https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js” > </script>

3. Operação do serviço Firebase

1. Para o código mencionado na parte superior, adicione o código fornecido na parte inferior, depois de encontrar // Initialize Firebase.

// Inicializa o Firebase

firebase.initializeApp(firebaseConfig);const messaging=firebase.messaging(); //Função personalizada feita para executar o serviço Firebase

  getStartToken(); // Este código recebe a mensagem do servidor /seu aplicativo e imprime a mensagem no console se a mesma guia for aberta a partir do projeto no navegador

messaging.onMessage(function(payload){console.log(“onMessage”,payload);});

2. Você pode escrever o código na parte inferior em um arquivo js separado presente em sua página HTML ou pode anexá-lo ao código na parte superior na tag <script>.

messaging.getToken() é uma função usada para recuperar tokens usando o Firebase SDK. Se um token for encontrado, ele é enviado ao servidor para ser armazenado, caso contrário, a permissão do usuário é solicitada por meio da função RequestPermission().

setTokenSentToServer() é outra função que utiliza armazenamento local para atribuir 1 como valor de sendTokenToServer caso o token já tenha sido enviado ao servidor e 0 caso o token não tenha sido enviado ao servidor devido à ocorrência de um erro ao ser enviado para o servidor ou é recuperado do SDK do Firebase.

4. Envio de notificações do projeto

Enviando-mensagem-do-projeto

Agora que tudo o que você precisa para enviar notificações do projeto está pronto, aqui estão os detalhes sobre como você pode enviar uma notificação ao usuário final cujo token você conhece.

1. Inicialmente, você precisa receber uma chave de serviço. Execute os seguintes passos-

  • Abra o console do Firebase
  • Clique nas configurações do projeto
  • Toque em 'Mensagens na Nuvem'
  • Você encontrará um código no campo Chave do servidor. Copie-o.

2. Envio de notificações push

Vamos usar a plataforma carteiro para enviar notificações push da Web do Firebase . Aqui estão as coisas que você precisa fazer é-

3. Defina o tipo de solicitação POST.

4. Digite o URL: https://fcm.googleapis.com/fcm/send

5. Clique na seção Cabeçalhos.

Você precisa preencher dois cabeçalhos, autorização e tipo de conteúdo.

· Autorização: Cole a chave do servidor que você copiou.

· Tipo de conteúdo: aplicativo/JSON (JavaScript Object Notation)

6. Agora clique para abrir a seção Corpo. Cole o token do usuário que o Firebase recuperou no momento do registro do usuário.

7. Agora envie a solicitação. Você poderá enviar notificações push para seus usuários a partir do servidor.

Observe que quando você envia sua primeira notificação por push para um usuário, o navegador da Web solicitará sua permissão para receber notificações de você. Somente se ele/ela conceder permissão, você poderá enviar pushes continuamente. Você pode garantir que seu usuário conceda sua permissão seguindo nossas dicas de notificações push.

Concluindo Você já deve ter entendido que enviar notificações push da Web usando o Firebase não é tão difícil quanto parece. Não requer muitos recursos e não leva muito tempo. Além disso, usando notificações push da web O Firebase não influencia as despesas de manutenção do seu site ou aplicativo da web. Se você ainda precisar de mais detalhes sobre sua funcionalidade, consulte a documentação do Firebase.

Faça um tour pelo produto

Leia também:

  • 7 fatores superestimados das notificações push da Web
  • Notificações Web Push | Uma tática de marketing por e-mail direto
  • 41 estatísticas de notificações push da Web que os profissionais de marketing precisam saber
  • 15 melhores softwares e ferramentas de notificação por push em 2022 {comparado}
  • Como as notificações push da Web são eficazes do que outras mídias de marketing?