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

Posted

技术标签:

【中文标题】如何使用 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)
 )

【讨论】:

以上是关于如何使用 Nuxt.js 实现 Firebase 云消息传递 (FCM)的主要内容,如果未能解决你的问题,请参考以下文章

在 Nuxt.js 应用中初始化 Firebase 的地方

json Nuxt.js Firebase

带有 Firebase 的 Nuxt.js s-s-r - ReferenceError:未定义导航器

Nuxt JS 未定义 Firebase 存储 XMLHttpRequest 错误

如何使用 nuxt.js 实现 CRUD 操作

为Nuxt.js部署云功能错误