FirebaseError:消息传递:此浏览器不支持使用firebase所需的API。(消息传递/不支持-浏览器)
我正在为安卓和iOS开发一个Ionic 5应用程序。我正在使用angularfire https://github.com/angular/angularfire/tree/v5，我遇到了一些问题。特别是，这个库在使用Firestore时运行良好，但是当我尝试使用云消息在我的Android设备上接收通知时，它会引发一个错误：FirebaseError: Messaging:此浏览器不支持使用firebase所需的API。(messaging/unsupported-browser).我遵循了这里链接的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)},
);
}
}
谢谢!
回答 2
Stack Overflow用户
发布于 2020-03-31 12:53:09
经过大量的研究，我终于找到了一个解决办法。我把它张贴在这里，这样以后类似的问题就可以解决了。在这里，正如Doug所建议的，https://caniuse.com/#feat=push-api列出了支持的浏览器。在这里，https://developer.chrome.com/multidevice/webview/overview，在一个常见问题，他们说，安卓WebView是基于ChromeforAndroid30.0.0版本，这是不受支持的。因此，我不得不使用一个名为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，也许在默认情况下有一种方法可以包含它，顺便说一句，它应该是这样的)。虽然我必须以以下方式修改代码以使用requestToken来执行FirebaseX操作，但它现在正在工作：
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)},
);
}
}
谢谢道格，不知怎么你帮我熬过来了！
https://stackoverflow.com/questions/60945213
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号