2018年2月6日 星期二

Ionic3 + FCM (推播)

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)



















點選新增訊息



選擇剛剛新增 應用程式











設定前景資料(當應用程式是開啟)

接收的推播


沒有留言:

張貼留言