我正在开发一个项目,其中有一个嵌入 React Native WebView 的 React Web 应用程序。我正在使用 Firebase Cloud Messaging (FCM) 来处理通知。当部署在安全域 (https://) 上时,Web 应用程序工作正常,但是当我在 React Native 应用程序的 WebView 中打开相同的 Web 应用程序时,我遇到以下错误:
此浏览器不支持 Firebase SDK 请求使用的 API
这是我在 React Web 应用程序中使用的 Firebase 配置和令牌检索代码:
import { useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/messaging';
import axios from 'axios';
const firebaseConfig = {
apiKey: "AIzaSyC9K1X3mSSw2d9RTVqBwBRy7ECtmkzJ4to",
authDomain: "brotherize-654cf.firebaseapp.com",
projectId: "brotherize-654cf",
storageBucket: "brotherize-654cf.appspot.com",
messagingSenderId: "612370118030",
appId: "1:612370118030:web:5a6bf0d77545330b2560df",
measurementId: "G-4YSQ78M7VP",
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
export const requestNotificationPermission = async () => {
try {
const permission = await Notification.requestPermission();
if (permission === 'granted') {
console.log('Notification permission granted.');
getDeviceToken();
} else {
console.log('Notification permission denied.');
}
} catch (error) {
console.error('Error requesting notification permission:', error);
}
};
const getDeviceToken = async () => {
try {
const currentToken = await messaging.getToken({
vapidKey: process.env.NEXT_PUBLIC_SERVER_KEY,
});
if (currentToken) {
console.log('Device token:', currentToken);
saveTokenToLocalStorage(currentToken);
saveTokenToDb(currentToken);
} else {
console.log('No registration token available.');
}
} catch (error) {
console.error('Error getting device token:', error);
}
};
const saveTokenToLocalStorage = (token: string) => {
localStorage.setItem('device_token', JSON.stringify(token));
console.log('Token saved to local storage.');
};
const saveTokenToDb = async (token: string) => {
try {
const response = await axios.post('/v1/user/token', {
deviceToken: token,
});
console.log('Token saved to database:', response.data);
} catch (error) {
console.error('Error saving token to database:', error);
}
};
此代码在 Web 浏览器中完美运行,但在我的 React Native 应用程序的 WebView 中加载 Web 应用程序时失败。
为了解决这个问题,需要在 firebase npm 包中进行一些内部更改,在 @firebase/app 或类似的(帮助 API 与 ReactApp 环境交互的模块)中,大约三周前有一个新的 commit 添加到项目中,您可以仅在 Firebase 的应用程序目录中本地强制进行这些更改,发生这种情况的原因有多种,其中之一可能是 Firebase 节点包本身可以读取正在访问的位置,并且通常会到达API 级别交互和浏览器检测在执行环境中出现错误:
有关代码中要更改的内容的更多详细信息,请参阅此处(或尝试使用 3 周前的新更改):https://github.com/firebase/firebase-js-sdk/pull/8315