Adicionando Push Notifications a um Web App com Firebase 🔔+🔥

Published in

Training Center

5 min readJun 29, 2018

As notificações podem ser inconvenientes em alguns momentos, isso não dá pra negar, mas, apesar disso, continua sendo uma maneira muito boa de interagir com seus usuários.

Hoje, com a evolução das web apps, está cada vez mais fácil usar os mesmos recursos de um aplicativo nativo.

A ideia deste artigo é mostrar como utilizar o Firebase para enviarmos notificações a partir de um web app.

Pré-requisitos

Requisições HTTP
JavaScript

Firebase

Firebase é uma plataforma que oferece vários serviços para aplicativos mobile e web. Ele te ajuda a criar seu app rapidamente com uma porrada de funcionalidades.

Para enviar as notificações iremos usar o serviço chamado Cloud Messaging, que permite enviar mensagens para qualquer dispositivo.

Configurando o projeto

Nesta demonstração, vou utilizar um simples projeto criado com o create-react-app para fazer o setup da demo, mas você pode usar o mesmo código em qualquer outro local que use JavaScript.

Antes de começarmos, precisamos adicionar a biblioteca do Firebase ao projeto.

npm install firebase --save

Vamos criar um arquivo dentro do diretório do projeto chamado push-notification.js

Dentro do arquivo vamos criar uma função que inicializa o Firebase com sua configurações:

import firebase from 'firebase';export const inicializarFirebase = () => {
  firebase.initializeApp({
    messagingSenderId: "Seu messagingSenderId"
  });
}

Beleza, agora que temos a função pronta precisamos chamá-la. Dentro do entrypoint seu projeto coloque a chamada da função.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { inicializarFirebase } from './push-notification';ReactDOM.render(<App />, document.getElementById('root'));
inicializarFirebase();

Você consegue encontrar as chaves do seu projeto dentro das configurações do Firebase

Service Worker

Um service worker é um script que seu navegador executa em segundo plano, separado da página da Web, possibilitando recursos que não precisam de uma página da Web ou de interação do usuário.

Para receber o evento de onMessage seu app precisa de um service worker. Por padrão, ao inicializar o Firebase ele procura por um chamadofirebase-messaging-sw.js.

Mas caso você já tenha um e quer aproveitá-lo para receber notificações, você pode especificar durante a inicialização do Firebase qual será o service worker que ele utilizará, exemplo:

export const inicializarFirebase = () => {
  firebase.initializeApp({
    messagingSenderId: '123456' // troque pelo seu sender id 
  });navigator.serviceWorker
    .register('/meu-sw.js')
    .then((registration) => {
      firebase.messaging().useServiceWorker(registration);
    });
}

Este service worker basicamente importará os script necessários para mostrar as notificações quando seu app estiver em segundo plano.

Então vamos lá, precisamos adicionar o firebase-messaging-sw.js onde seus arquivos são servidos, como eu estou usando o create-react-app vou adicioná-lo dentro da pasta public com o seguinte conteúdo:

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');firebase.initializeApp({
    messagingSenderId: "seu id aqui"
});const messaging = firebase.messaging();

Pedindo permissão para mandar notificações

Bom, todo mundo sabe o quanto é chato entrar no site e instantaneamente ele pedir autorização para te enviar notificações. Então vamos fazer de um modo em que o usuário escolha se quer receber as notificações.

Primeiro de tudo, vamos criar a função que irá fazer o pedido e retornar o token do usuário.

Dentro do nosso arquivo push-notification.js adicione o código:

export const pedirPermissaoParaReceberNotificacoes = async () => {
  try {
    const messaging = firebase.messaging();
    await messaging.requestPermission();
    const token = await messaging.getToken();
    console.log('token do usuário:', token);    return token;
  } catch (error) {
    console.error(error);
  }
}

Agora, dentro de algum botão, chame essa função no evento de clique, exemplo:

import React from 'react';
import { pedirPermissaoParaReceberNotificacoes } from './push-notification';const BotaoNotificacao = () => (
    <button onClick={pedirPermissaoParaReceberNotificacoes} >
      Clique aqui para receber notificações
    </button>
);export default BotaoNotificacao;

Pronto, vamos ver em funcionamento:

Enviando as Notificações

Para os exemplos vou utilizar o Postman, mas você pode fazer isso de outras infinitas maneiras, o ideal é que isso aconteça no seu back-end.

Para enviar a notificação precisamos fazer uma requisição para o Firebase informando o token de quem a receberá.

Basicamente, precisamos fazer uma requisição do tipo POST para https://fcm.googleapis.com/fcm/send enviando um JSON no corpo da requisição.

Abaixo esta a estrutura do JSON que será enviado:

{
    "notification": {
        "title": "Título da notificação",
        "body": "Texto da notificação",
        "click_action": "http://localhost:3000/",
        "icon": "http://localhost:3000/icon.png"
    },
    "to": "TOKEN DO USUÁRIO QUE IRÁ RECEBER"
}

No cabeçalho da requisição precisamos passar a chave do servidor do nosso projeto no Firebase e o tipo do conteúdo:

Content-Type: application/json
Authorization: key=CHAVE DO SERVIDOR

A chave do servidor se encontra nas configurações do projeto no Firebase, dentro da aba Cloud Messaging.

gif mostrando onde pegar a chave do servidor

Notificação em ação

Lembrando que a notificação só ira aparecer quando seu app estiver minimizado ou em segundo plano.

Pronto! Já estamos aptos a enviar a notificação direta para um usuário.

Enviar notificação para um grupo de usuários

Bom, agora que já vimos como enviar uma noticação para um usuário, que tal mandarmos as notificações para vários usuários de uma vez só?

Para isso, o Firebase tem um recurso chamado tópico, onde você inscreve determinado números de tokens a um tópico específico, e você pode enviar a mesma notificação para todos eles a partir de uma requisição.

Como eu faço isso?

Basicamente iremos mandar uma requisição POST para o endereço https://iid.googleapis.com/iid/v1/TOKEN/rel/topics/NOME_DO_TOPICO passando o nome do tópico e o token na URL.

Não se esqueça de passar no cabeçalho a mesma autorização que usamos para enviar a notificação.

gif mostrando a inscrição de um usuário em um tópico

Para enviar a requisição para os usuários inscritos no tópicos é bem parecido com o envio para uma pessoa, a diferença é que passamos o nome do tópico no atributo “to” invés do token.

Veja o exemplo abaixo:

{
    "notification": {
        "title": "Título da notificação para o tópico",
        "body": "Texto da notificação para o tópico",
        "click_action": "http://localhost:3000/",
        "icon": "http://localhost:3000/icon.png"
    },
    "to": "/topics/NOME_DO_TOPICO"
}