如何在嵌入 React Native WebView 的 Web 应用程序中处理 Firebase 通知?

问题描述 投票:0回答:1

我正在开发一个项目,其中有一个嵌入 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 应用程序时失败。

reactjs firebase firebase-cloud-messaging react-native-webview
1个回答
0
投票

为了解决这个问题,需要在 firebase npm 包中进行一些内部更改,在 @firebase/app 或类似的(帮助 API 与 ReactApp 环境交互的模块)中,大约三周前有一个新的 commit 添加到项目中,您可以仅在 Firebase 的应用程序目录中本地强制进行这些更改,发生这种情况的原因有多种,其中之一可能是 Firebase 节点包本身可以读取正在访问的位置,并且通常会到达API 级别交互和浏览器检测在执行环境中出现错误:

有关代码中要更改的内容的更多详细信息,请参阅此处(或尝试使用 3 周前的新更改):https://github.com/firebase/firebase-js-sdk/pull/8315

© www.soinside.com 2019 - 2024. All rights reserved.