Firebase Cloud Messaging in Nuxt (notifiche push)

Implementeremo le notifiche push nella nostra applicazione Nuxt utilizzando Firebase. Presumo che tu conosca alcune nozioni di base di Vue e Nuxt. Le notifiche push appariranno nel cassetto delle notifiche nel sistema operativo dell'utente (al di fuori del browser). Pertanto, creeremo una chiave che comunichi a Firebase quale tipo di sistema operativo sta utilizzando l'utente.

Useremo un addetto all'assistenza per gestire i messaggi in arrivo da Firebase. Nuxt ha una bella documentazione per configurare Firebase. Questa guida ti aiuterà con qualsiasi ulteriore domanda.
https://firebase.nuxtjs.org/guide/getting-started

1. Aggiungi dipendenze

npm install firebase
npm install @nuxtjs/firebase

4. Nella pagina "panoramica", fare clic sull'icona </> per registrare l'app

5. Quando fai clic su registrati, vedrai apparire del codice simile a questo:

<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. Dobbiamo impostare un addetto all'assistenza per gestire le notifiche push. Crea un file chiamato serviceWorker.js nella directory principale. Incolla il codice seguente in questo file.

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'
  },
};

Dovrai sostituire <yourServerKey> con la tua chiave. Per trovare la chiave del tuo server, vai alla console Firebase => Impostazioni progetto => Cloud Messaging.

Ora ricostruisci la tua app nuxt. (es. npm run dev). Dovresti vedere un messaggio apparire nel cassetto delle notifiche.

Assicurati di installare / importare 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)
  })