您的浏览器不支持 Firebase 消息传递如何解决这个问题？

Question

我正在使用 firebase 消息传递带有反应的网络推送通知。但浏览器显示此消息

消息：此浏览器不支持使用 firebase SDK 所需的 API。（消息/不受支持的浏览器）

这是代码：

const initializedFirebaseApp = firebase.initializeApp({
  apiKey: "XXXXXX",
  authDomain: "XXXXXXX",
  databaseURL: "XXXXXXXXX",
  projectId: "XXXXXX",
  storageBucket: "XXXX",
  messagingSenderId: "XXXXXX",
  appId: "XXXXXX"
});

if (firebase.messaging.isSupported()) {
    let messaging = initializedFirebaseApp.messaging();
}

firebase.messaging.isSupported()总是返回false。有什么办法可以继续吗？

react 版本：16.8.2 和 firebase 版本：6.0.2

Answer 1

除了上述解释之外，您还可以通过执行以下操作来检查浏览器是否支持消息传递：

const messaging = firebase.messaging.isSupported() ? firebase.messaging() : null

Answer 2

FCM 仅在localhost 和启用https 的站点中支持。如果您希望 FCM 支持，您需要在本地主机上工作或在某处部署（您可以使用 firebase）。

如果您使用像 local.somehost.com 这样的 nginx 代理，则云消息传递不支持。要解决此问题，您需要将 local.somehost.com 设为 HTTPS，您可以在 nginx 中安装 openssl 和证书和密钥。

我认为这可以解决您的问题。

Answer 3

版本 9 中的 isSupported() 返回 Promise，因此您应该等待解决

const messaging = (async () => {
try {
    const isSupportedBrowser = await isSupported();
    if (isSupportedBrowser) {
        return getMessaging(config);
    }
    console.log('Firebase not supported this browser');
    return null;
} catch (err) {
    console.log(err);
    return null;
}
})();

如果您使用版本 9，您应该将消息传递给（ onMessageListener 解析器和 getToken ）

消息监听器

export const onMessageListener = async () =>
new Promise((resolve) =>
    (async () => {
        const messagingResolve = await messaging;
        onMessage(messagingResolve, (payload) => {
            // console.log('On message: ', messaging, payload);
            resolve(payload);
        });
    })()
);

获取令牌

export const requestForToken = async (dispatch) => {
try {
    const messagingResolve = await messaging;
    const currentToken = await getToken(messagingResolve, {
        vapidKey: *your FCM APP SERVER KEY*,
    });
    if (currentToken) {
        *your code*
    }
} catch (err) {
    console.log('An error occurred while retrieving token. ', err);
}
};