Firebase Cloud Messaging em Nuxt (notificações push)

Vamos implementar notificações push em nosso aplicativo Nuxt usando o Firebase. Vou presumir que você conhece algumas noções básicas de Vue e Nuxt. As notificações push aparecerão na gaveta de notificações no sistema operacional do usuário (fora do navegador). Portanto, vamos criar uma chave que informa ao Firebase que tipo de sistema operacional o usuário está usando.

Vamos usar um service worker para lidar com as mensagens recebidas do Firebase. Nuxt tem uma boa documentação para configurar o Firebase. Este guia irá ajudá-lo com quaisquer outras questões.
https://firebase.nuxtjs.org/guide/getting-started

1. Adicionar dependências

npm install firebase
npm install @nuxtjs/firebase

4. Na página “visão geral”, clique no ícone </> para registrar o aplicativo

5. Ao clicar em registrar, você verá um código que se parece com isto:

<script>
  var firebaseConfig = {
    apiKey: yourKey",
    authDomain: "yourAuthDomain",
    projectId: "yourProjectId",
    storageBucket: "yourStorageBucket",
    messagingSenderId: "yourMessagingSenderId",
    appId: "yourAppId",
    measurementId: "yourMeasurementId"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

const fs = require('fs')
// modules
[
  '@nuxtjs/firebase',
  {
    config: {
      apiKey: "<yourKey>",
      authDomain: "<yourAuthDomain>",
      projectId: "<yourProjectId>",
      storageBucket: "<yourStorageBucket>",
      messagingSenderId: "<yourMessagingSenderId>",
      appId: "<yourAppId>",
      measurementId: ",<yourMeasurementId>"
    },
    services: {
      messaging:  {
        createServiceWorker: true,
        fcmPublicVapidKey: '<yourFCMPublicVapidKey>', //see step 7
        inject: fs.readFileSync('./serviceWorker.js') //see step 8
      },
    }
  }

8. Precisamos configurar um service worker para lidar com as notificações push. Crie um arquivo chamado serviceWorker.js no diretório raiz. Cole o código a seguir neste arquivo.

self.addEventListener('push', function (e) {
data = e.data.json();
  var options = {
    body: data.notification.body,
    icon: data.notification.icon,
    vibrate: [100, 50, 100],
    data: {
    dateOfArrival: Date.now(),
    primaryKey: '2'
  },
};

Você precisará substituir <yourServerKey> por sua chave. Para encontrar a chave do servidor, vá para o console do Firebase => Configurações do projeto => Mensagens na nuvem.

Agora, reconstrua seu aplicativo nuxt. (ou seja, npm run dev). Você deverá ver uma mensagem aparecer na sua gaveta de notificações.

Certifique-se de instalar / importar axios.

async mounted() {
  const currentToken = await this.$fire.messaging.getToken()
  const data = JSON.stringify({
    notification: {
      title: 'firebase',
      body: 'firebase is awesome',
      click_action: 'http://localhost:3000/',
      icon: 'http://localhost:3000/assets/images/brand-logo.png'
    }, 
    to: currentToken
  })
  const config = {
    method: 'post',
    url: 'https://fcm.googleapis.com/fcm/send',
    headers: { 
      'Content-Type': 'application/json', 
      'Authorization': 'key=<yourServerKey>'
    },
    data
  };
  const response = await axios(config)
  this.$fire.messaging.onMessage((payload) => {
    console.info('Message received: ', payload)
  })
  this.$fire.messaging.onTokenRefresh(async () => {
    const refreshToken = await this.$fire.messaging.getToken()
    console.log('Token Refreshed',refreshToken)
  })