M3CmsNotification

Descrição

Essa e' a classe responsável por:

• Pedir permissão para o usuário receber notificações
• Ativar o service worker
• Registrar o token do usuário em um topico
• Ativar evento de escuta para quando o usuário receber uma notificação enquanto estiver navegando no site

Lado do servidor

Como essa classe é responsável por pedir permissão para o usuário receber notificações, ela só pode ser utilizada no lado do navegador. Qualquer tentativa de utilizar ela no lado do servidor irá gerar um erro ja que as APIs nao estarão disponíveis.

Performance

Recomendo o componente de botão / popup de notificações tenha algum tipo de lazy loading, para que nao haja problema de Hidratação no NextJS.

Exemplos

Criando um arquivo de configuração

Para nao ter que ficar repetindo o código de configuração do M3CmsNotification em todos os arquivos que você for utilizar, crie um arquivo chamado pushNotification.ts em um diretório de sua preferência e importe ele nos arquivos que você for utilizar. Assim, você só precisa alterar o arquivo de configuração em um único lugar. E tambem vai sempre pegar a mesma instância do M3CmsNotification em todos os lugares que você importar.

src/cms/pushNotification.ts

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
})

Criando um botão para solicitar permissão de notificação

src/components/RequestNotificationButton.tsx

import { m3CmsNotification } from "../cms/pushNotification"

export function ButtonRequestNotification() {
  return (
    <button onClick={() => m3CmsNotification.requestPermission()}>
      Solicitar permissão para receber notificações
    </button>
  )
}

Criando popup interno

Quando o usuario estiver navegando no site e receber uma notificação, você pode criar um popup interno para exibir a notificação para o usuário. Para isso, basta criar um componente que seja acionado pelo metodo onMessageListener do M3CmsNotification.

src/components/NotificationPopup.tsx

import { m3CmsNotification } from "../cms/pushNotification"

export function NotificationPopup() {
  const [notification, setNotification] = useState(null)

  useEffect(() => {
    m3CmsNotification.onMessageListener((payload) => {
      setNotification(payload.notification)
    })
  }, [])

  return (
    <div>
      {notification && (
        <div>
          <h1>{notification.title}</h1>
          <p>{notification.body}</p>
        </div>
      )}
    </div>
  )
}