Web firebase.messaging().onMessage 未触发，但后台通知已完美触发

Question

如果推送消息是用firebase.messaging((.onMessage发送的，我想重新加载或触发foregrounf中的某个事件，但它没有被触发。我正在使用带有后台通知的firebase.mesaging.sw.js并且它工作正常，我的代码有什么问题？

火力基地.js

const config = {
apiKey: "x",
projectId: "x",
storageBucket: "x",
messagingSenderId: "x"
};
firebase.initializeApp(config);
const msg = firebase.messaging()
msg.requestPermission()
.then(() => {
return msg.getToken()
})
.then((token) => {
})
.catch((err) => {
})
msg.onMessage(function(payload) {
alert("Foreground message fired!")
console.log(payload)
});

Firebase.messaging.sw.js

importScripts("https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/7.0.0/firebase-messaging.js");
const config = {
apiKey: "x",
projectId: "x",
storageBucket: 'x',
messagingSenderId: "x"
};
firebase.initializeApp(config);
const msg = firebase.messaging()
msg.setBackgroundMessageHandler(function(payload) {
let options = {
body: payload.data.body,
icon: payload.data.icon
}
return self.registration.showNotification(payload.data.title, options);
});

我不知道我的代码出了什么问题

Answer 1

简单的解决方案是将Firebse更新到最新版本。

例如。

importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-messaging.js');

注意：更新 Firebase 库版本后，消息传递 SenderId将无法在firebase-messaging-sw.js文件中运行。您必须提供所有其他参数，例如。apiKey，projectId，appId以及messagingSenderId。

• 如果仍然不起作用。清理浏览器缓存并重新注册服务辅助角色。

有关更多详细信息，您可以参考此解决方案

Answer 2

> 在 2020 年仍然有同样的问题。就我而言，它是这样的：

• 对于后台消息，您需要在importScripts中使用相同的版本，在应用中对于前台消息需要具有相同的版本
• 获取后台服务的令牌后调用它

firebaseApp.messaging().getToken().then((currentToken) => {
if (currentToken) {
console.log(currentToken)
} else {
// Show permission request.
console.log(
'No Instance ID token available. Request permission to generate one.')
}
/** When app is active */
firebase.messaging().onMessage((payload) => {
console.log(payload)
}, e => {
console.log(e)
})
})

Answer 3

对于其他有这个问题的人，我最终通过以下方式解决了它：

1. 将包含标头的 JS 文件和软件 JS 文件中的 Firebase SDK 版本升级到最新版本(目前为 7.8.1(。
2. 将整个firebaseConfig数组添加到 SWfirebase.initializeApp()，如前面的答案所示。
3. 从开发者工具中的">应用程序>清除存储"部分清理 Chrome 缓存。
4. 正在从我的数据库中删除以前的注册令牌。
阻止
5. 和取消阻止来自浏览器的通知以强制生成新的令牌。

基本上，使用更新的Firebase SDK重新开始似乎可以解决此类问题。

Answer 4

你错过了很多东西，onMessage 只有在调用之前初始化了 firebase 时才有效。请遵循此内容。我已经这样做了，它正在工作。

初始化 Firebase 并获取令牌

export class BrowserFcmProvider {
export const FIREBASE_CONFIG = {
apiKey: "****",
authDomain: "****",
databaseURL: "****",
projectId: "****",
storageBucket: "****",
messagingSenderId: "****",
appId: "****"
}
firebase.initializeApp(FIREBASE_CONFIG);
async webGetToken() {
try {
const messaging = firebase.messaging();
await messaging.requestPermission();
const token = await messaging.getToken();
let uuidTemp = new DeviceUUID().get();
return this.saveTokenToFireStoreFromWeb(token, uuidTemp)
} catch (e) {
console.log(e);
}
}
saveTokenToFireStoreFromWeb(token, uuid) {
try {
const docData = {
token: token,
device_type: 'web',
uuid: uuid
}
const devicesRef = this.db.collection('devices')
return devicesRef.doc(uuid).set(docData);
} catch (e) {
console.log(e, 'saveTokenError');
}
}
showMessage() {
try {
const messaging = firebase.messaging();
messaging.onMessage((payload) => {
console.log(payload);
})
} catch (e) {
console.log(e)
}
}
}

并在应用程序加载时调用该方法，如下所示

async configureFirebaseForBrowser(res) {
await this.bfcm.webGetToken();
this.bfcm.showMessage();
}

火力基本功能和有效负载类型

const payloadWeb = {
title: title,
body: body,
data: {
title: title,
body: body
},
tokens: uniqueDevicesTokenArrayWeb,
}
const responseWeb = await admin.messaging().sendMulticast(payloadWeb);
console.log(responseWeb.successCount + ' notifications has been sent to Web successfully');

我使用了异步和等待，因为我们需要异步管理火垒/火库操作。

FCM 在隐身模式和 Safari 浏览器中不起作用

Answer 5

我面临的同样问题。在我的例子中，"package.json">和"firebase-messaging-sw.js">importScripts版本中的firebase版本是不同的。在"firebase-messaging-sw.js">导入脚本中设置相同版本后，该版本在"包.json">，我的问题解决了。

更改之前

**"package.json"**

"firebase": "^8.2.1",

**"firebase-messaging-sw.js"**
importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-messaging.js');

更改后

**"package.json"**
"firebase": "^8.2.1",
**"firebase-messaging-sw.js"**
importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-messaging.js');