I’m working on a project where I have a React web app that is embedded within a React Native WebView. I’m using Firebase Cloud Messaging (FCM) for handling notifications. The web app works fine when deployed on a secure domain (https://), but when I open the same web app in a WebView in my React Native app, I encounter the following error:

This browser doesn’t support the API requested to use by Firebase SDK

Here’s the Firebase configuration and token retrieval code I’m using in my React web app:

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

This code works perfectly in the web browser but fails when the web app is loaded within the WebView of my React Native app.