FirebaseError:消息传递:此浏览器不支持使用Firebase SDK所需的API.(消息/不支持的浏览器) [英] FirebaseError: Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser)

问题描述

我正在为Android和iOS开发Ionic 5应用程序.我正在使用angularfire https://github.com/angular/angularfire/tree/v5，而我遇到了一些问题.特别是，该库在使用Firestore时工作良好，但是当我尝试使用Cloud Messaging在我的Android设备上接收通知时，它会引发错误: FirebaseError:Messaging:此浏览器不支持使用该API所必需的firebase SDK.(邮件/浏览器不受支持).我遵循了此处链接的GitHub存储库上的可用教程，并尝试在浏览器上使用它，并且效果很好.我怀疑该库无法与Ionic一起正常使用，因此可以使用某些服务(例如Firestore)，而不能使用其他服务.有人有解决此问题的想法吗?以下是我的服务代码段:

I'm developing a Ionic 5 app both for Android and iOS. I'm using angularfire https://github.com/angular/angularfire/tree/v5 and I'm having some issues. In particular, this library works good when using Firestore, but when I try to use Cloud Messaging to receive notifications on my Android device, it raises an error: FirebaseError: Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser). I followed the tutorial available on the GitHub repository linked here and I tried to use it on browser and it works fine. My suspect is that this library doesn't work properly with Ionic, so some services, like Firestore, can be used and others not. Anyone has some ideas to solve this issue? Here follows the snippet of code of my service:

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

谢谢！

推荐答案

经过大量研究，我终于找到了解决方案.我将其发布在这里，以便将来解决类似的问题.此处 https://caniuse.com/#feat=push-api ，道格·史蒂文森(Doug Stevenson)建议，列出支持的浏览器.在此处 https://developer.chrome.com/multidevice/webview/overview 其中一种常见问题解答，它们指出Android WebView基于不支持Android 30.0.0版的Chrome.因此，我不得不使用一个名为FirebaseX的Cordova插件:

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

还需要另外两个插件:

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

，并且您的应用已在Firebase控制台中注册为Android和iOS，这使您可以将两个文件包含在项目的根文件夹中: google-services.json 和 GoogleService-Info.plist .添加此类插件后，请运行以下命令(不需要，但建议使用):

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

在上一个命令中，我还有另一个问题:任务':app:transformDexArchiveWithExternalLibsDexMergerForDebug'的执行失败.我通过遵循以下指南解决了该问题: https://developer.android.com/studio/build/multidex#mdex-gradle .(我刚刚添加了 multiDexEnabled true ，也许默认情况下有一种方法可以包含它，因为它应该是这样).现在可以正常工作，尽管我必须以以下方式修改代码以使用FirebaseX来执行 requestToken 操作:

On the last command, I had another issue: Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'. I solved it by following this guide: https://developer.android.com/studio/build/multidex#mdex-gradle. (I just added the multiDexEnabled true, maybe there is a way to include it by default, as it should be by the way). It is now working, although I had to adapt my code in the following way to use FirebaseX to perform the requestToken operation:

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

谢谢道格，以某种方式您帮助我度过了难关！

Thank you Doug, somehow you helped me get through it!

这篇关于FirebaseError:消息传递:此浏览器不支持使用Firebase SDK所需的API.(消息/不支持的浏览器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！