logo标签列表

如何在Nuxt.js中实现Firebase Cloud Messaging (FCM)

javascriptvue.jsfirebase-cloud-messagingservice-workernuxt.js
20

我正在尝试将Google的Firebase Cloud Messaging（FCM）集成到我的Nuxt.js应用程序中。

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

现在我不确定从哪里或如何继续进行。

想法是在vuex中处理所有内容，在通知模块中处理前景和背景通知。

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

问题：

我该如何注册service worker、请求权限并处理前景/后景通知？ 我指的是特定于Nuxt.js的确切位置/文件/方式？我是否应该专门为此制作另一个插件，使用middleware文件夹还是仅在默认layout文件中处理所有内容？

最干净的方法是什么？

提前感谢！

3个回答
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')
      }
    }
  }
]

第四步 > 最后...将其添加到您的index.js或layout文件中。

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

如需了解更多细节和步骤，您可以访问文章。

0

一旦您安装了@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 store中，只需调用this.$fire.messaging.getToken()来请求用户允许接收通知。

你可以通过下面这个函数来启动接收消息，在这个函数中调用this.$fire.messaging.getToken()

 messaging.onMessage(function (payload) {
  context.dispatch('yourDesireDispatchFunction', payload)
 })
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接