Firebase Cloud Messaging in Nuxt (Push-Benachrichtigungen)

Wir werden Push-Benachrichtigungen mithilfe von Firebase in unsere Nuxt-Anwendung implementieren. Ich gehe davon aus, dass Sie einige Grundlagen von Vue und Nuxt kennen. Die Push-Benachrichtigungen werden in der Benachrichtigungsleiste des Betriebssystems des Benutzers (außerhalb des Browsers) angezeigt. Daher erstellen wir einen Schlüssel, der Firebase mitteilt, welchen Betriebssystemtyp der Benutzer verwendet.

Wir werden einen Servicemitarbeiter einsetzen, um eingehende Nachrichten von Firebase zu verarbeiten. Nuxt hat einige nette Dokumentationen zum Einrichten von Firebase. Dieser Leitfaden hilft Ihnen bei weiteren Fragen.
https://firebase.nuxtjs.org/guide/getting-started

1. Abhängigkeiten hinzufügen

npm install firebase
npm install @nuxtjs/firebase

4. Klicken Sie auf der Seite „Übersicht“ auf das Symbol </>, um die App zu registrieren

5. Wenn Sie auf Registrieren klicken, wird ein Code angezeigt, der ungefähr so ​​aussieht:

<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. Wir müssen einen Servicemitarbeiter einrichten, der die Push-Benachrichtigungen verarbeitet. Erstellen Sie eine Datei mit dem Namen serviceWorker.js im Stammverzeichnis. Fügen Sie den folgenden Code in diese Datei ein.

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

Sie müssen <IhrServerKey> durch Ihren Schlüssel ersetzen. Um Ihren Serverschlüssel zu finden, gehen Sie zur Firebase-Konsole => Projekteinstellungen => Cloud Messaging.

Erstellen Sie jetzt Ihre Nuxt-App neu. (dh npm run dev). In Ihrer Benachrichtigungsschublade sollte eine Meldung angezeigt werden.

Stellen Sie sicher, dass Sie Axios installieren / importieren.

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