如何在 nuxtjs / vuejs 上实现 Firebase(FCM) 推送通知

Question

花了很多时间在互联网上搜索如何在我的 nuxt 项目上实现 Firebase FCM 推送通知的简单直接的方法没有结果。

Answer 1

这里是如何在你的 NuxtJs/Vuejs 项目中实现 FCM 推送通知

第一步

创建您的 nuxt 应用，例如 npx create-nuxt-app <your-app-name>

第 2 步

安装 firebase npm install firebase 和 @nuxt/firebase npm install @nuxt/firebase

第 3 步

创建您的 Firebase 项目

• 转到 firebase 控制台并创建一个项目

• 给它一个名字

• 如果您愿意，请启用 Google 分析，然后点击创建

-在项目创建时喝杯咖啡☕

• 您要在此页面上复制配置，我们稍后将使用该配置

• 最后，我们登陆了我们在 firebase 上的项目主页，如下图所示

• 让我们回到我们的项目

第四步

在您的nuxt.config.js 上添加

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/firebase',    
  ],
  // firebase FCM starts here

  firebase: {
    lazy: false,
    config: {
      apiKey: <apiKey>,
      authDomain: <authDomain>,
      projected: <projectId>,
      storageBucket: <storageBucket>,
      messagingSenderId: <messagingSenderId>,
      appId: <appId>,
      measurementId: <measurementId>,
      databaseURL: <databaseURL>,
    },
    onFirebaseHosting: false,
    services: {
      messaging: true,
    }
  },


  messaging: {
    createServiceWorker: true,
    actions: [
      {
        action: 'goHome',
        url: 'https://localhost:3000'
      }
    ],
    fcmPublicVapidKey: <vapidKey> 
  },

要让您的 vapidKey 导航到 Firebase 控制台上的 Project Settings 并选择 Cloud Messaging，向下滚动并按下 Generate Key Pair 以获得您的 vapidKey。见下图

复制并粘贴到您的nuxt.config.js

第 5 步

在项目根目录的static 文件夹中创建一个名为firebase-messaging-sw.js 的文件，然后将输入粘贴如下

importScripts('https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.7/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing the generated config
var firebaseConfig = {
      apiKey: <apiKey>,
      authDomain: <authDomain>,
      projected: <projectId>,
      storageBucket: <storageBucket>,
      messagingSenderId: <messagingSenderId>,
      appId: <appId>,
      measurementId: <measurementId>,
      databaseURL: <databaseURL>,
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
  console.log('Received background message ', payload);

  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

第 6 步

在你的 index.vue 上进行如下配置

<template>
  <div>
    <h1>Get Notified</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listenersStarted: false,
      idToken: "",
    };
  },
  mounted() {
    this.startListeners();
  },
  methods: {
    // FCM NOTIFICATION FUNCTIONS
    async startListeners() {
      await this.startOnMessageListener();
      await this.startTokenRefreshListener();
      await this.requestPermission();
      await this.getIdToken();
      this.listenersStarted = true;
    },
    startOnMessageListener() {
      try {
        this.$fire.messaging.onMessage((payload) => {
          console.info("Message received : ", payload);
          console.log(payload.notification.body);
        });
      } catch (e) {
        console.error("Error : ", e);
      }
    },
    startTokenRefreshListener() {
      try {
        this.$fire.messaging.onTokenRefresh(async () => {
          try {
            await this.$fire.messaging.getToken();
          } catch (e) {
            console.error("Error : ", e);
          }
        });
      } catch (e) {
        console.error("Error : ", e);
      }
    },
    async requestPermission() {
      try {
        const permission = await Notification.requestPermission();
        console.log("GIVEN notify perms");
        console.log(permission);
      } catch (e) {
        console.error("Error : ", e);
      }
    },
    async getIdToken() {
      try {
        this.idToken = await this.$fire.messaging.getToken();
        console.log("TOKEN ID FOR this browser");
        console.log(this.idToken);
      } catch (e) {
        console.error("Error : ", e);
      }
    },
  },
};
</script>

第 7 步

运行npm run dev，打开控制台查看是否有显示通知的权限。如果提升为允许通知，则接受。

第 8 步

导航到 firebase Engage 菜单上的 Cloud Messaging，然后点击 Send your first message。输入您希望通知包含的内容，然后选择您的应用作为目标用户，我们有它，您应该会在浏览器上看到这样的通知