如何使用 Nuxt.js 实现 Firebase 云消息传递 (FCM)

Posted 2023-02-22

【中文标题】如何使用 Nuxt.js 实现 Firebase 云消息传递 (FCM)

【英文标题】：How to implement Firebase Cloud Messaging (FCM) with Nuxt.js

【发布时间】：2020-01-29 12:05:58

【问题描述】：

我正在尝试在我的 Nuxt.js APP 中实现 Google 的 Firebase 云消息传递 (FCM)。

到目前为止，我已经安装了 firebase，在 ./plugins 文件夹中创建了一个 firebase.js 插件，导入并初始化了 firebase 和消息服务，一切似乎都运行良好。

现在我不确定从这里如何或去哪里..

这个想法是在通知模块中处理 vuex 中的所有内容。

我想同时处理后台和前台通知。背景由 service-worker 处理，对于前台，我制作了一个简单的通知组件，我想在每次收到 FCM 的推送通知时显示它。

问题：

我将如何注册 Service Worker、请求权限和处理前台/后台通知？我的意思是特定于 Nuxt.js 的确切位置/文件/方式？我应该为此制作另一个插件，使用中间件文件夹还是只处理默认布局文件中的所有内容？

最干净的方法是什么？

提前致谢！

【参考方案1】：

步骤 1) 安装依赖项

npm install firebase
npm install @nuxtjs/firebase

第 2 步）在项目的根文件夹中创建一个文件 serviceWorker.js。

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

步骤 3) 如下配置您的 nuxt.config.js。

将此行添加到文件的顶部。

const fs = require('fs')

使用 firebase 凭据更新您的模块数组。

[
  '@nuxtjs/firebase',
  
    config: 
      apiKey: "<yourKey>",
      authDomain: "<yourAuthDomain>",
      projectId: "<yourProjectId>",
      storageBucket: "<yourStorageBucket>",
      messagingSenderId: "<yourMessagingSenderId>",
      appId: "<yourAppId>",
      measurementId: ",<yourMeasurementId>"
    ,
    onFirebaseHosting: false,
    services: 
      messaging: 
        createServiceWorker: true,
        fcmPublicVapidKey: '<yourFCMPublicVapidKey>',
        inject: fs.readFileSync('./serviceWorker.js')
      
    
  
]

第 4 步 > 最后.. 到您的 index.js 或布局文件。

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

更多详情，了解步骤，可以访问这个article。

【参考方案2】：

您可以查看 Nuxt 模块 Nuxt Firebase https://firebase.nuxtjs.org

文档很好https://firebase.nuxtjs.org/service-options/messaging

【参考方案3】：

安装 @nuxtjs/firebase 模块并将以下代码插入您的 nuxt.config.js 后，您可以从 firebase 控制台获取这些数据。我将它们作为dotenv 模块放置，因为它更容易管理不同项目的配置模板。

 firebase: 
    config: 
      apiKey: dotenv.parsed.apiKey,
      authDomain: dotenv.parsed.authDomain,
      databaseURL: dotenv.parsed.databaseURL,
      projectId: dotenv.parsed.projectId,
      storageBucket: dotenv.parsed.storageBucket,
      messagingSenderId: dotenv.parsed.messagingSenderId,
      appId: dotenv.parsed.appId,
      measurementId: dotenv.parsed.measurementId
    ,
    onFirebaseHosting: false,
    services: 
     messaging: 
        createServiceWorker: true,
        fcmPublicVapidKey: dotenv.parsed.vapidKey // OPTIONAL : Sets vapid key for FCM after initialization
      

一旦你实现了它，模块将自己生成服务工作者，你可以在你的检查元素控制台上查看它们。

说完了，

在您的 vuex 商店中，只需致电 this.$fire.messaging.getToken() 请求用户获得接收通知的权限。

您可以在下面调用this.$fire.messaging.getToken() 的地方使用此功能启动接收消息

 messaging.onMessage(function (payload) 
  context.dispatch('yourDesireDispatchFunction', payload)
 )