使用Firebase 的Cloud messaging 可以簡單的實踐跨平台的推播功能.
首先我們必須要安裝FCM的Plugin
ionic cordova plugin add cordova plugin add cordova-plugin-fcm-ng
npm install @ionic-native/fcm
很多官方或是教學都是推薦安裝 cordova-plugin-fcm-with-dependecy-updated
, 但是我的IONIC執行時顯示安裝失敗(2020.01). 如果你也遇到同樣的問題可以試試cordova plugin add cordova-plugin-fcm-ng
https://www.npmjs.com/package/cordova-plugin-fcm-ng
首先要在 app.module.ts
導入FCM
import { FCM } from '@ionic-native/fcm/ngx';
別忘了在Provider 加入 FCM
providers: [
StatusBar,
SplashScreen,
FCM,
...
],
在constructor導入FCM
constructor(
...
public fcm:FCM
使用Ionic native 都會先確保程式在平台準備好後執行
this.platform.ready().then(() => {
this.fcm.subscribeToTopic('marketing');
this.fcm.getToken().then(token => {
console.log(token);
});
this.fcm.onNotification().subscribe(data => {
console.log(data);
if (data.wasTapped) {
console.log('Received in background');
} else {
console.log('Received in foreground');
}
});
this.fcm.onTokenRefresh().subscribe(token => {
console.log(token);
});
});
}
第一行 this.fcm.subscribeToTopic('marketing')
我們可以設定訂閱推播的群體, 這裡的例子是maketing
每個Device都會產生一個Token,我們可以透過getToken()
取得.
接下來處理接收到通知的代碼data.wasTapped
如果是true
就代表App在background, 使用者沒有正在使用App.
反之App在Foreground 代表使用者在使用App,注意這時的推播通知是不會顯示的,必須使用Alert或是Modal來通知使用者.
Ionic 設定完成後我們要在Firebase Android下載 google-services.json
IOS則是GoogleService-Info.plist
. 我是使用Android開發,google-services.json
必須放在platforms\android
.
然後執行 $ ionic cordova run android
就可以在Firebase Console 測試推播.