This browser doesn't support the API requested to use by Firebase SDK #8372
Description
Operating System
Android IOS
Browser Version
Chrome,Safari
Firebase SDK Version
10.12.3
Firebase SDK Product:
Messaging
Describe your project's tooling
Nextjs
Describe the problem
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
This code works perfectly in the web browser but fails when the web app is loaded within the WebView of my React Native app.
Steps and code to reproduce issue
import { useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/messaging';
import axios from 'axios';
const firebaseConfig = {
// Edit: removed user's project details.
};
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);
}
};