我正在使用ionic 3应用程序--
说明-：1.我正在开发ionic应用程序，正在尝试使用Firebase将PUSH通知集成到may应用程序中
我已按照https://ionicframework.com/docs/native/push/
的所有步骤进行操作问题：推送通知不适用于ios和android的Web平台。
**
请参阅：可能是由于离子fcm不是，我没有正确放置fcm 支持Web。
**
我将代码放在下面：
ts文件-：
import { Push, PushOptions , PushObject } from '@ionic-native/push/ngx';
export class MyApp {
rootPage:any = TabsPage;
fcmId: any;
constructor( private storage: Storage , private alertCtrl: AlertController , private push: Push , public navCtrl: NavController , platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
initPushNotification() {
// to check if we have permission
this.push.hasPermission().then((res: any) => {
if (res.isEnabled) {
console.log('We have permission to send push notifications');
} else {
console.log("We don't have permission to send push notifications");
}
});
// to initialize push notifications
const options: PushOptions = {
android: {
senderID: '839584699716',
},
ios: {
alert: 'true',
badge: true,
sound: 'false',
},
windows: {},
browser: {
pushServiceURL: 'http://push.api.phonegap.com/v1/push',
},
};
const pushObject: PushObject = this.push.init(options);
pushObject.on('notification').subscribe((notification: any) => {
console.log('Received a notification', notification);
//Notification Display Section
let confirmAlert = this.alertCtrl.create({
title: 'New Notification',
message: JSON.stringify(notification),
buttons: [
{
text: 'Ignore',
role: 'cancel',
},
{
text: 'View',
handler: () => {
//TODO: Your logic here
//self.nav.push(DetailsPage, {message: data.message});
},
},
],
});
confirmAlert.present();
//
});
pushObject.on('registration').subscribe((registration: any) => {
console.log('Device registered', registration);
this.fcmId = registration.registrationId;
console.log(this.fcmId);
this.storage.set('fcmId', this.fcmId);
});
pushObject.on('error').subscribe(error => console.error('Error with Push plugin.....', error));
}
}
app.module.ts
import { AngularFireModule } from 'angularfire2';
import firebase from 'firebase';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireAuthModule } from 'angularfire2/auth'
import { Push } from '@ionic-native/push/ngx';
export const firebaseConfig = {
apiKey: "AIzaSyBrU5I4_hK-M4Ai3#############",
authDomain: "primeval-wind-230006.firebaseapp.com",
databaseURL: "https://primeval-wind-230006.firebaseio.com",
projectId: "primeval-wind-230006",
storageBucket: "primeval-wind-230006.appspot.com",
messagingSenderId: "##########"
}
firebase.initializeApp(firebaseConfig)
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
SecondtryPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig),
AngularFireAuthModule,
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
SecondtryPage
],
providers: [
StatusBar,Push,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
GooglePlus
]
})
export class AppModule {}
答案 0 :(得分：0)
我将在这里分享适用于我的一个应用程序（Ionic 3，Angular 5.2.3）的内容：
在您的服务人员中添加以下代码：
// FIREBASE:
importScripts('https://www.gstatic.com/firebasejs/5.8.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/5.8.2/firebase-messaging.js');
// firebase messaging part:
firebase.initializeApp({
// get this from Firebase console, Cloud messaging section
'messagingSenderId':'YOURIDHERE'
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler((payload) => {
console.log('Received background message ', payload);
// here you can override some options describing what's in the message;
// however, the actual content will come from the Webtask
const notificationOptions = {
icon: '/assets/img/mstile-150x150.png'
};
return self.registration.showNotification(notificationTitle, notificationOptions);
});
然后在app.module.ts中导入消防和消息传递模块：
import { AngularFireModule } from '@angular/fire';
import { AngularFireMessagingModule } from '@angular/fire/messaging';
确保还将模块添加到@NgModule的imports部分：
AngularFireModule.initializeApp(ENV.FIREBASE_CONFIG),
AngularFireMessagingModule,
以上ENV配置包含您的fcm配置：
FIREBASE_CONFIG: {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
},
现在您的消息传递提供商：
import { AngularFireMessaging } from '@angular/fire/messaging';
...
constructor(
private firebaseMessaging: AngularFireMessaging,
) {}
...
initFCMforPWA() {
navigator.serviceWorker.getRegistration().then((registration)=>{
this.firebaseMessaging.messaging.subscribe(
(messaging) => {
// we use this trick here to access useServiceWorker method:
messaging.useServiceWorker(registration);
// small workaround below (as I use ANGULAR FIRE 5.0.0):
messaging.onTokenRefresh = messaging.onTokenRefresh.bind(messaging);
// small work around above
this.enableNotifications();
// set flag that messaging was init:
this.appHasFCMInitDone = true;
messaging.onMessage((message)=>{
console.log(message);
this.toaster.presentSimpleToast(message.notification.title, "top");
});
},
(error)=>{ console.log("failed to subscribe to firebase messaging")}
);
});
}
enableNotifications() {
console.log("Requesting permission and token...");
this.firebaseMessaging.requestToken.subscribe((token) => {
console.log("Permission and token granted");
this.fcmPermissionGranted = true;
// send token to our server and set this for current user:
this.setFCMToken(token).subscribe(
() => { this.pushToken = token; console.log("token was set on server side") },
(error) => {this.handleError(error)}
)
}, (error)=>{
this.fcmPermissionGranted = false;
console.log(error);
});
};
disableNotifications() {
return new Promise((resolve, reject) =>{
this.revokeFCMToken().subscribe(() => {
this.pushToken = null;
this.userID = null;
this.userData = null;
console.log("removed notification token from morphistic server");
this.firebaseMessaging.getToken.pipe(mergeMap(token => this.firebaseMessaging.deleteToken(token))).subscribe(() => {
console.log('deleted notification token from firebase');
resolve();
}
);
}
);
})
};
请注意，您需要拥有自己的后端方法来设置和撤消令牌。
此配置适用于带有AngularFire 5.0.0的Ionic 3 / Angular 5.2.3