Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser)

import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { AngularFireFunctions } from '@angular/fire/functions';
import { ToastController } from '@ionic/angular';

/* //Fixing temporary bug in AngularFire - Found on Internet
import * as app from 'firebase';
const _messaging = app.messaging();
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
_messaging.onMessage = _messaging.onMessage.bind(_messaging); */

@Injectable({
  providedIn: 'root'
})
export class FcmService {
  token: any; 

  constructor(private toastController: ToastController, private afm: AngularFireMessaging, private aff: AngularFireFunctions) { }

  async makeToast(message: string){
    const toast = await this.toastController.create({
      duration: 5000,
      message: message,
      position: 'top',
      buttons: [
        {
          side: 'end',
          text: 'Close',
          role: 'cancel',
          handler: () => {
            console.log('Favorite clicked');
          }
        }]
    });
    toast.present();
  }

  getPermission(){
    this.afm.requestToken
      .subscribe(
        (token) => { console.log('Permission granted! Save to the server!', token); this.token = token;},
        (error) => { console.error(error); },  
      );
  }

  showMessages(){
    return this.afm.messages
      .subscribe(
        (message) => {console.log(message);}
      );
  }

  subscribe(topic: string){
    this.aff.httpsCallable('subscribeToTopic')({topic: topic, token: this.token})
      .subscribe(
        (_) => {this.makeToast("Notifications about "+topic+" activated.")},
        (error) => {console.log(error)},
      );
  }

  unsubscribe(topic: string){
    this.aff.httpsCallable('unsubscribeFromTopic')({topic: topic, token: this.token})
      .subscribe(
        (_) => {this.makeToast("Notifications about "+topic+" deactivated.")},
        (error) => {console.log(error)},
      );
  }
}

After a lot of reasearch I finally found a solution. I'm posting it here, so that future similar issues can be solved. Here https://caniuse.com/#feat=push-api, as Doug Stevenson suggested, the supported browsers are listed. Here https://developer.chrome.com/multidevice/webview/overview, in one of the FAQs, they state that Android WebView is based on Chrome for Android version 30.0.0 which is not supported. Hence, I had to use a Cordova plugin called FirebaseX:

ionic cordova plugin add cordova-plugin-firebasex
npm install @ionic-native/firebase-x

which also requires this other two plugins:

ionic cordova plugin add cordova-plugin-androidx
ionic cordova plugin add cordova-plugin-androidx-adapter

and that your app is registred both as Android and iOS in the Firebase console, which gives you two files to be included in the root folder of your project: google-services.json and GoogleService-Info.plist. Once you have added such plugins, run the following commands (they could not be needed, but it is recommended):

cordova clean
ionic cordova build android

import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { AngularFireFunctions } from '@angular/fire/functions';
import { ToastController, Platform } from '@ionic/angular';
import { FirebaseX } from "@ionic-native/firebase-x/ngx";

/* //Fixing temporary bug in AngularFire - Found on Internet
import * as app from 'firebase';
const _messaging = app.messaging();
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
_messaging.onMessage = _messaging.onMessage.bind(_messaging); */

@Injectable({
  providedIn: 'root'
})
export class FcmService {
  token: any; 

  constructor(private toastController: ToastController, private afm: AngularFireMessaging, private aff: AngularFireFunctions, private platform: Platform,
    private firebase: FirebaseX) { }

  async makeToast(message: string){
    const toast = await this.toastController.create({
      duration: 5000,
      message: message,
      position: 'top',
      buttons: [
        {
          side: 'end',
          text: 'Close',
          role: 'cancel',
          handler: () => {
            console.log('Favorite clicked');
          }
        }]
    });
    toast.present();
  }

  async getPermission(){
    if (this.platform.is("android")){
      this.firebase.getToken().then(
        (token) => console.log(token)
      );
    } else {
      await this.afm.requestToken
      .subscribe(
        (token) => { console.log('Permission granted! Save to the server!', token); this.token = token;},
        (error) => { console.error(error); },  
      );
    }
  }

  showMessages(){
    return this.afm.messages
      .subscribe(
        (message) => {console.log(message);}
      );
  }

  subscribe(topic: string){
    this.aff.httpsCallable('subscribeToTopic')({topic: topic, token: this.token})
      .subscribe(
        (_) => {this.makeToast("Notification about "+topic+" activated.")},
        (error) => {console.log(error)},
      );
  }

  unsubscribe(topic: string){
    this.aff.httpsCallable('unsubscribeFromTopic')({topic: topic, token: this.token})
      .subscribe(
        (_) => {this.makeToast("Notification about "+topic+" deactivated.")},
        (error) => {console.log(error)},
      );
  }
}

We are using the firebase 8.2.1 version. We are developing using react and typescript. The error occurs only when I view it in safari. The error is FirebaseError: Messaging: This browser doesn't support the API's required to use the firebase SDK.(messaging/unsupported-browser). I looked at the following document, but only safari does not support cloud messages. How can I solve this problem? https://firebase.google.com/support/guides/environments_js-sdk?hl=ja[enter link description here]1

import firebase from 'firebase/app';
import 'firebase/messaging';
import { asyncNotificationToken } from 'apis/asyncNotificationToken';

const firebaseConfig = {
  apiKey: '******************',
  projectId: '******',
  messagingSenderId: '*******',
  appId: '********',
};

const VAPID_KEY =
  '******************************';

if (firebase.apps.length < 1) {
  firebase.initializeApp(firebaseConfig);
}

export const prepareNotification = () => {
  firebase
    .messaging()
    .requestPermission()
    .then(() => {
      prepareNotificationToken();
    })
    .catch(() => {
      console.log('Unable to get permission to notify.');
    });
};

export const prepareNotificationToken = () => {
  firebase
    .messaging()
    .getToken({ vapidKey: VAPID_KEY })
    .then((token) => {
      asyncNotificationToken(token).then(() => {
        console.log('Registed notification token.');
      });
    });
};

a

export const prepareNotification = () => {
  let messaging = null;
  if (firebase.messaging.isSupported()) {
    messaging = firebase.messaging();
  }
  firebase
    .messaging()
    .requestPermission()
    .then(() => {
      prepareNotificationToken();
    })
    .catch(() => {
      console.log('Unable to get permission to notify.');
    });
};

export const prepareNotificationToken = () => {
  firebase
    .messaging()
    .getToken({ vapidKey: VAPID_KEY })
    .then((token) => {
      asyncNotificationToken(token).then(() => {
        console.log('Registed notification token.');
      });
    });
};

Check compatibility before trying to use it.

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