Web firebase.messaging().onMessage 未觸發，但后台通知完美觸發

Question

如果使用 firebase.messaging().onMessage 發送推送消息，我想在前台重新加載或觸發某些事件，但它沒有被觸發。 我正在使用帶有后台通知的 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 庫版本，那么 messagesSenderId 將無法在您的 firebase- messaging -sw.js文件中使用。 您必須提供所有其他參數，例如。 apiKey、projectId、appId以及messagesSenderId 。

• 如果還是不行。 清理瀏覽器緩存並重新注冊 service worker。

有關更多詳細信息，您可以參考此解決方案

Answer 2

對於其他有此問題的人，我終於通過以下方式解決了它：

1. 將包含頭文件的 JS 文件和 SW JS 文件中的 Firebase SDK 版本升級到最新版本（當前為 7.8.1）。
2. 如前一個答案所示，將整個firebaseConfig數組添加到 SW firebase.initializeApp() 。
3. 從開發人員工具中的應用程序 > 清除存儲部分清除 Chrome 緩存。
4. 從我的數據庫中刪除以前的注冊令牌。
5. 阻止和取消阻止來自瀏覽器的通知以強制生成新的令牌。

基本上，從更新的 Firebase SDK開始全新的開始似乎可以解決此類問題。

Answer 3

2020 年仍然有同樣的問題。就我而言，情況是這樣的：

• 您需要在importScripts中為后台消息使用相同的版本，在您的應用程序中為前台消息使用相同的版本
• 獲取后台服務token后調用

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 4

你錯過了很多東西，只有在調用 firebase 之前初始化它， onMessage 才會起作用。 請遵循此。 我已經這樣做了，它正在工作。

初始化 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();
  }

Firebase function 和有效載荷類型

    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');

我使用了 async 和 await 因為我們需要異步管理 firebase/firestore 操作。

fcm 在隱身模式和 safari 瀏覽器下不起作用

Answer 5

我面臨同樣的問題。 就我而言， “package.json”和“firebase-messaging-sw.js” importScripts 版本中的 firebase 版本不同。 在"package.json"中的 "firebase -messaging-sw.js" importScripts 中設置相同版本后，我的問題得到解決。

變更前

 **"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');