[Hybrid APP] Cordova + Firebase 簡單實現 ios APNS推播 以及 android FCM(GCM) 推播

在以前，當專案同時有 ios & android 兩派系統用戶，後台就必須實作兩套推送方式 (APNS以及GCM)，直到2016年5月的Google IO大會上推出Firebase，並推出多項新功能供大家使用，包含這次介紹的推播功能。

Google後來也將原本android推播平台 Google Cloud Messaging (GCM)全面改為 Firebase Cloud Messaging (FCM)，FCM為跨平台服務，可推送ios、android、web applications，FCM推播ios其實還是使用Apple Push Notification service (APNS)，只是對於開發者來說，不用去區分client平台為何，FCM自動幫你分辨並推播。

官方 FCM 展示影片:

PS.此範例使用 Cordova框架 搭配 ionic框架為實例


在cordova專案加入 cordova-plugin-fcm 套件

#cordova plugin add cordova-plugin-fcm


程式碼:


取得FCM Token:
FCMPlugin.getToken(function(token){
    alert(token);
});

收到推播訊息event
FCMPlugin.onNotification(function(data){
      alert(JSON.stringify(data));
});

範例圖:

至firebase平台上註冊APP
https://console.firebase.google.com

先建立專案

加入 ios以及android 應用程式 

iOS 連結ID 為 APP ID (bundle ID)

將檔案下載至 cordova專案跟目錄

此項目略過 直接按繼續

Android 套件名稱 一樣為 APP ID

一樣下載至cordova專案跟目錄

到這裡，android推播部分其實已經完成，ios還必須加入APNS憑證才可以推播。
ios要有推播功能必須要有 Apple 開發者帳戶，才可以有推播功能。
至於如何申請就不再此教學，請另google

至開發者帳戶新增App ID

申請推播憑證前，需要先產生CSR憑證需求檔(此需求檔只能使用一次)

必須使用MAC OS 鑰匙圈存取產生

輸入email完後 下面選擇 儲存到硬碟即可產生CSR需求檔

上傳剛剛產生的需求檔

下載cer憑證

由於FCM需要的是.p12憑證，所以必須再使用 鑰匙圈存取，將cer轉p12
將剛剛下載的cer檔案點兩下即可匯入鑰匙圈。
至左邊 我的憑證 即可看到剛剛匯入的憑證，展開憑證，會出現本機用戶名稱，再點右鍵輸出，檔案格式必須選擇 .p12

至Firebase 匯入 APNS憑證

此伺服器金鑰須記下，之後推播需要用到

到這邊，ios也設定完畢了!

再build APP 之前要先確認 cordova APP id 是否設定正確

確定無誤後 即可build APP
#cordova build ios
#cordova build android


PS.注意 ios部分，用Xcode編譯前，要先確認推播功能有沒有打開

APP開啟時會顯示需要授權推播功能，點授權後須重開起APP才可以取得到FCM Token

推播測試

左邊功能選單 Notifications 可以測試推播功能
推送目標可以是應用程式也可以是主題或是單一裝置
此範例先使用應用程式為範例

ios收到推播畫面:

android 收到推播畫面:

FCM 另外還可以推送 web application ，有興趣的朋友可以自己實作看看~

有任何疑問歡迎留言

By 艾摩杰~