Question

如果通过firebase.messaging（）。onMessage发送推送消息，但我希望重新加载或触发foregrounf中的某些事件，但未触发。我正在将firebase.mesaging.sw.js与后台通知一起使用，并且可以正常工作，我的代码有什么问题？

firebase.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库版本后， messagingSenderId 在您的 firebase-messaging-sw.js 文件中将不起作用。您必须提供所有其他参数，例如。 apiKey，projectId，appId 以及 messagingSenderId 。

如果仍然无法正常工作。清理浏览器缓存并重新注册服务人员。

有关更多详细信息，请参阅此solution

Answer 2

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

将包含标头的JS文件和SW JS文件中的Firebase SDK版本升级到最新版本（当前为7.8.1）。
如先前的答案所示，将整个firebaseConfig数组添加到软件firebase.initializeApp()。
从开发人员工具的应用程序>清除存储部分清除Chrome缓存。
从我的数据库中删除先前的注册令牌。
阻止和解除阻止来自浏览器的通知以强制生成新令牌。

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

Answer 3

您丢失了很多东西，只有在调用Firebase之前对其进行初始化的情况下，onMessage才起作用。请遵循此。我已经这样做了，并且正在工作。

初始化firebase并获取令牌

172.28.0.2 - - [15/Oct/2019 06:05:43] "GET / HTTP/1.1" 200 -
200
utf-8
ascii
Hello World!

并在应用加载时调用该方法

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

Firebase功能和有效负载类型

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

我使用了async和await，因为我们需要异步管理firebase / firestore操作。

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

Answer 4

在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 5

我遇到了同样的问题。在我的例子中，"package.json" 和 "firebase-messaging-sw.js" 中的 firebase 版本是不同的。在 "firebase-messaging-sw.js" importScripts 中设置相同版本后 “package.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');

Web firebase.messaging（）。onMessage未触发，但后台通知已完全触发

5 个答案: