如何使用Nuxt.js实现Firebase Cloud Messaging (FCM)

Question

我正在尝试将Google的Firebase云消息传递(FCM(实现到我的Nuxt.js应用程序中。

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

现在我不确定如何或从哪里开始..

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

我想处理后台和前台通知。后台由服务工作者处理，对于前台，我制作了一个简单的通知组件，每次收到来自 FCM 的推送通知时都想显示该组件。

问题：

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

最干净的方法是什么？

提前感谢！

Answer 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> 最后.. 到您的索引.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)
})
}

有关更多详细信息，要了解这些步骤，您可以访问本文。

Answer 2

您可以查看Nuxt ModuleNuxt Firebasehttps://firebase.nuxtjs.org

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

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