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)

點選新增訊息

選擇剛剛新增 應用程式

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

接收的推播