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

Question

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

Answer 1

以下是如何在 NuxtJs/Vuejs 项目上实现 FCM 推送通知

\n

步骤1

\n

像这样创建你的 nuxt 应用程序npx create-nuxt-app <your-app-name>

\n

第2步

\n

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

\n

步骤3

\n

创建您的 firebase 项目

\n

\n

• 转到 Firebase 控制台并创建项目\n

  \n
\n

• 给它起个名字\n

  \n
\n

• 如果您愿意，请启用 Google Analytics，然后单击“创建”

  \n
\n

\n

\n

- 当项目创建 \xe2\x98\x95 时喝点咖啡

\n

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

\n

\n

\n
• 最后，我们登陆 firebase 项目的主页，如下图所示
\n

\n

\n

\n
• 让我们回到我们的项目
\n

\n

步骤4

\n

在您的nuxt.config.js添加上

\n

\n  // Modules: https://go.nuxtjs.dev/config-modules\n  modules: [\n    \'@nuxtjs/firebase\',    \n  ],\n  // firebase FCM starts here\n\n  firebase: {\n    lazy: false,\n    config: {\n      apiKey: <apiKey>,\n      authDomain: <authDomain>,\n      projected: <projectId>,\n      storageBucket: <storageBucket>,\n      messagingSenderId: <messagingSenderId>,\n      appId: <appId>,\n      measurementId: <measurementId>,\n      databaseURL: <databaseURL>,\n    },\n    onFirebaseHosting: false,\n    services: {\n      messaging: true,\n    }\n  },\n\n\n  messaging: {\n    createServiceWorker: true,\n    actions: [\n      {\n        action: \'goHome\',\n        url: \'https://localhost:3000\'\n      }\n    ],\n    fcmPublicVapidKey: <vapidKey> \n  },\n

\n

要获取您的 vapidKey，请导航至Firebase 控制台上的“项目设置”并选择“云消息传递”，请向下滚动并按“生成密钥对”以获取您的 vapidKey。请参阅下图\n

\n

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

\n

步骤5

\n

在static项目根目录的文件夹中创建一个名为的文件firebase-messaging-sw.js并粘贴输入配置，如下所示

\n

importScripts(\'https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js\');\nimportScripts(\'https://www.gstatic.com/firebasejs/8.2.7/firebase-messaging.js\');\n\n// Initialize the Firebase app in the service worker by passing the generated config\nvar firebaseConfig = {\n      apiKey: <apiKey>,\n      authDomain: <authDomain>,\n      projected: <projectId>,\n      storageBucket: <storageBucket>,\n      messagingSenderId: <messagingSenderId>,\n      appId: <appId>,\n      measurementId: <measurementId>,\n      databaseURL: <databaseURL>,\n};\n\nfirebase.initializeApp(firebaseConfig);\n\n// Retrieve firebase messaging\nconst messaging = firebase.messaging();\n\nmessaging.onBackgroundMessage(function (payload) {\n  console.log(\'Received background message \', payload);\n\n  const notificationTitle = payload.notification.title;\n  const notificationOptions = {\n    body: payload.notification.body\n  };\n\n  self.registration.showNotification(notificationTitle,\n    notificationOptions);\n});\n

\n

步骤6

\n

在你的index.vue上配置如下

\n

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

\n

步骤7

\n

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

\n

步骤8

\n

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

\n

\n