Firebase
推出FCM 目的將用來取代GCM，雖然GCM 仍然不滅，但我們先來嘗鮮看看，連推播的介面都已經設計好了，只要簡單幾行Code就可以完成推播的功能，廢話不說，就先看示範吧。
一、
下戴必要的套件
二、
設定Config.XML
修改widget id的名稱，因為要對應到FCM準備要推播的應用程式名稱，所以如果不一致就無法接收推播了喔!!! 很重要
三、注入model
|
import { FCM } from '@ionic-native/fcm';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap:
[IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide:
ErrorHandler, useClass: IonicErrorHandler},
FCM
]
})
export class AppModule
{}
|
FCM
推播的物件是要被注入Provider ，如果沒注入 就會失敗囉~
四、呼叫FCM 的實作演練
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FCM } from '@ionic-native/fcm'; //注入FCM 到Constructor
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl:
NavController, private fcm: FCM) {
fcm.subscribeToTopic('marketing');
//取得FCM 的token
fcm.getToken().then(token => {
alert("getToken")
})
//取得FCM 的推播訊息
fcm.onNotification().subscribe(data => {
if
(data.wasTapped) { //取得背景監聽
alert("message
in background!");
} else {
alert("message
in front! "); //前景
alert(JSON.stringify(data)); //取得推播資訊
};
})
//取消推播
fcm.unsubscribeFromTopic('marketing');
}
}
根據Ionic的官方文件 需要訂閱名稱，位置放在constructor fcm.subscribeToTopic('marketing');
在結束時就要將訂閱名稱取消…。
fcm.unsubscribeFromTopic('marketing');
五、設定推播內容
Project
OverView à 新增其他應用程式 (config.xml的 widget id)
點選新增訊息
選擇剛剛新增 應用程式
設定前景資料(當應用程式是開啟)
接收的推播
