iT邦幫忙

0

[IONIC 4 + Firebase教學]使用FCM作推播通知

  • 分享至 

  • xImage
  •  

使用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 測試推播.


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
lolis
iT邦新手 5 級 ‧ 2020-01-08 11:01:12

感謝分享 XD

我要留言

立即登入留言