FirebaseError: Messaging: этот браузер не поддерживает API, необходимый для использования Firebase SDK. (Сообщений / неподдерживаемый браузер)

Question

Я разрабатываю приложение Ioni c 5 для Android и iOS. Я использую angularfire https://github.com/angular/angularfire/tree/v5 и у меня возникли некоторые проблемы. В частности, эта библиотека хорошо работает при использовании Firestore, но когда я пытаюсь использовать Cloud Messaging для получения уведомлений на моем устройстве Android, возникает ошибка: FirebaseError: Messaging: этот браузер не поддерживает требуемый API использовать Firebase SDK. (Сообщений / неподдерживаемый браузер) . Я следовал учебному пособию, доступному в репозитории GitHub, указанном здесь, и пытался использовать его в браузере, и он отлично работает. Я подозреваю, что эта библиотека не работает должным образом с Ioni c, поэтому некоторые службы, такие как Firestore, могут использоваться, а другие - нет. У кого-нибудь есть идеи для решения этой проблемы? Ниже приведен фрагмент кода моего сервиса:

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

Спасибо!

Answer 1

После долгих исследований я наконец нашел решение. Я публикую это здесь, чтобы в будущем можно было решить подобные проблемы. Здесь https://caniuse.com/#feat = pu sh -api , как предположил Дуг Стивенсон, перечислены поддерживаемые браузеры. Здесь https://developer.chrome.com/multidevice/webview/overview в одном из часто задаваемых вопросов говорится, что Android WebView основан на Chrome для Android версии 30.0.0, которая не поддерживается. Следовательно, мне пришлось использовать плагин Cordova под названием FirebaseX:

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

, который также требует двух других плагинов:

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

и чтобы ваше приложение было зарегистрировано как Android и iOS в консоли Firebase, которая дает вам два файла для включения в папку root вашего проекта: google-services. json и GoogleService-Info.plist . После того, как вы добавили такие плагины, выполните следующие команды (они могут не понадобиться, но это рекомендуется):

cordova clean
ionic cordova build android

В последней команде у меня возникла другая проблема: Выполнение не выполнено для задачи ': приложение: transformDexArchiveWithExternalLibsDexMergerForDebug' . Я решил это, следуя этому руководству: https://developer.android.com/studio/build/multidex#mdex -gradle . (Я только что добавил multiDexEnabled true, может быть, есть способ включить его по умолчанию, как это и должно быть кстати). Теперь он работает, хотя мне пришлось адаптировать свой код следующим образом, чтобы использовать FirebaseX для выполнения операции requestToken :

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

Спасибо, Даг, как-то ты помог мне пройти через это!

Answer 2

На главной странице документации указано:

API FCM JavaScript позволяет получать уведомления в веб-приложениях, работающих в браузерах, поддерживающих Pu * 1013. * API. Это включает в себя версии браузера, перечисленные в этой матрице поддержки и Chrome расширениях через API Pu sh.

Если вы перейдете по этой ссылке для матрицы поддержки, вы узнает, поддерживает ли ваш браузер API pu sh. Если вы попытаетесь использовать FCM в неподдерживаемом браузере, вы получите это сообщение. Вам нужно будет выяснить, поддерживает ли хост-система этот API.