Pular para o conteúdo principal

Push Notification

Introdução​

O Push Notification é uma maneira de enviar mensagens para os usuários que ja acessaram o seu site, mesmo que ele não esteja aberto no momento. É uma maneira de se comunicar com os usuários de forma mais direta e pessoal.

Como funciona​

O Push Notification funciona da seguinte maneira: o usuário acessa o site e é perguntado se ele deseja receber notificações. Caso ele aceite, o navegador dele irá gerar um token que será associado com topico. Esse token é único para cada usuário e navegador. Quando o site deseja enviar uma notificação, ele envia para o topico e o navegador irá enviar a notificação para todos os usuários que estão inscritos nesse topico.

Como implementar​

Para implementar o Push Notification, é necessário configurar o Firebase, o CMS, o Service Worker e o Frontend.

Configuração do Firebase​

Antes de começar a implementar o push notification, é necessário configurar o Firebase. Para isso, siga os seguintes passos:

  • Tenha uma conta no Firebase
  • Crie um projeto no Firebase
  • Vá em Visão geral do projeto > Configurações do Projeto
  • Em Geral copie o objeto de configuração do SDK do Firebase
  • Em Cloud Messaging copie o Chave do servidor

Configuração do CMS​

Para configurar o CMS, siga os seguintes passos:

  • Configure uma conta no Google Cloud Platform
  • Acesse o seu projeto do Firebase pelo Google Cloud Platform
  • Menu lateral > APIs e Serviços > Credenciais
  • Em Contas de serviço clique em editar
  • Acesse a aba Chaves e clique em Criar chave
  • Selecione JSON e clique em Criar
  • Com esse arquivo em seu computador, envie ele para o nosso time de suporte para que possamos configurar o CMS para o seu projeto.

Configuração do Service Worker​

O Service Worker é um arquivo que fica na raiz do seu projeto e é responsável por gerenciar as notificações. Em projetos que utilizam o NextJS, o arquivo fica na pasta public.

Para configurar o Service Worker, siga os seguintes passos:

  1. Crie um arquivo chamado firebase-messaging-sw.js na raiz do seu diretório public
  2. Copie o seguinte código para o arquivo substituindo o FIREBASE_CONFIG pelo objeto de configuração do Firebase copiado anteriormente:
importScripts("https://cdn.jsdelivr.net/npm/@m3cms/[email protected]/dist/serviceWorker.js");

const FIREBASE_CONFIG = {
  apiKey: "---",
  authDomain: "----",
  projectId: "---",
  storageBucket: "---",
  messagingSenderId: "---",
  appId: "-----",
  measurementId: "----"
};

const m3CmsNotification = new M3CmsNotificationServiceWorker(FIREBASE_CONFIG)
m3CmsNotification.init()

Configuração do Frontend​

Para configurar o frontend, siga os seguintes passos:

  1. instale o nosso pacote npm de push notification
npm i @m3cms/push-notification
  1. Crie um arquivo chamado pushNotification.ts em um diretório de sua preferência
  2. Copie o seguinte código para o arquivo substituindo o FIREBASE_CONFIG pelo objeto de configuração do Firebase copiado anteriormente:
import { M3CmsNotification } from "@m3cms/push-notification"

const M3_CMS_CONFIG = {
  projectId: "------",
  baseEndpoint: "---------"
}

const FIREBASE_CONFIG = {
  apiKey: "---",
  authDomain: "----",
  projectId: "---",
  storageBucket: "---",
  messagingSenderId: "---",
  appId: "-----",
  measurementId: "----"
};

const PUBLIC_KEY_CLOUD_MESSAGING = "-----------"

export const m3CmsNotification = new M3CmsNotification({
  m3CmsConfig: M3_CMS_CONFIG,
  firebaseConfig: FIREBASE_CONFIG,
  publicKeyCloudMessaging: PUBLIC_KEY_CLOUD_MESSAGING
})
  1. Execute o método requestPermission em algum lugar do seu código para solicitar permissão para o usuário
NotificationButtonRequest.tsx
import { m3CmsNotification } from "./pushNotification"

export const NotificationButtonRequest = () => {
  const handleClick = () => {
    m3CmsNotification.requestPermission()
  }

  return (
    <button onClick={handleClick}>
      Solicitar permissão
    </button>
  )
}

E pronto! Se o usuário aceitar, ele irá receber notificações do seu site quando você enviar pelo nosso CMS.