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

如果通过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(".0.0/firebase-app.js");
importScripts(".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);

});

我不知道我的代码有什么问题

您缺少很多东西，只有在调用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();
  }

我已使用async并等待，因为我们需要异步管理firebase / firestore操作。

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

如果通过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(".0.0/firebase-app.js");
importScripts(".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);

});

我不知道我的代码有什么问题

您缺少很多东西，只有在调用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();
  }

我已使用async并等待，因为我们需要异步管理firebase / firestore操作。