Question

我正在为Android和iOS开发Ionic 5应用程序。我正在使用angularfire https://github.com/angular/angularfire/tree/v5，但遇到了一些问题。特别是，该库在使用Firestore时工作良好，但是当我尝试使用Cloud Messaging在我的Android设备上接收通知时，会引发错误： FirebaseError：Messaging：此浏览器不支持使用该API所必需的firebase SDK。（邮件/浏览器不支持）。我遵循了此处链接的GitHub存储库上的可用教程，并尝试在浏览器上使用它，并且效果很好。我的怀疑是该库无法与Ionic一起正常使用，因此可以使用某些服务（例如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

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

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 。添加此类插件后，请运行以下命令（不需要，但建议使用）：

cordova clean
ionic cordova build android

在上一个命令中，我还有另一个问题：任务'：app：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

在main documentation page上显示：

FCM JavaScript API使您可以通过Web接收通知消息在支持Push API的浏览器中运行的应用程序。这包括 support matrix和Chrome扩展程序中列出的浏览器版本通过Push API。

如果您导航到支持列表的链接，则会发现您的浏览器是否支持推送API。如果尝试在不受支持的浏览器上使用FCM，则会收到该消息。您需要确定主机操作系统是否支持此API。

FirebaseError：消息传递：此浏览器不支持使用Firebase SDK所需的API。（邮件/浏览器不支持）

2 个答案:

FirebaseError：消息传递：此浏览器不支持使用Firebase SDK所需的API。 （邮件/浏览器不支持）

2 个答案:

FirebaseError：消息传递：此浏览器不支持使用Firebase SDK所需的API。（邮件/浏览器不支持）