FCM 是 Firebase Cloud Messaging 的縮寫，這是一種跨平台的消息推送服務，由Google提供。它允許開發者向用戶的Android、iOS或網頁應用程式發送通知或消息，而它的前身就是GCM（已經在2019年時正式停用）。



建立FCM專案

首先直接到Firebase的官網【點我前往】，並且在右上角的地方找到「Go to console」→「建立專案」→「輸入專案名稱」→「關閉Google Analytics」→「建立專案」→「完成」







建立應用程式

新的專案第一次使用時要先「新增應用程式」，我們用Android做為示範。先在左邊找到「互動交流」→「Messaging」

接著在右方頁面找到「Android」的圖標

註冊應用程式

註冊應用程式的地方輸入「Android套件名稱」和「應用程式暱稱」，套件名稱可以在「capacitor.config.ts」裡面找到


下載並接著新增設定檔

這邊直接將「google-services.json」下載並且儲存到Ionic專案底下android/app資料夾


新增Firebase SDK

這個步驟Capacitor套件會幫我們處理掉因此直接略過即可

後續步驟

到這一步所有的設定都完成，接著就可以開始撰寫Ionic專案囉！


安裝Capacitor Push Notifications Plugin和執行APP

安裝插件

我們回到專案並且使用以下指令安裝插件：
npm i @capacitor/push-notifications
ionic cap sync

當APP在foreground時的推播的顯示方式（選用）

如果有這個需求則可以在capacitor.config.ts底下加入以下程式碼：
plugins: {
  PushNotifications: {
    presentationOptions: ["badge", "sound", "alert"],
  },
}

添加Push Notification程式碼

接著在app.component.ts底下加入以下程式碼，在「registration」時使用「console.info」把註冊成功後的Token顯示在LogCat上，方便我們等等可以複製下來：
// 檢查和註冊推播權限
private checkAndRequestPermission$ = defer(() => from(PushNotifications.checkPermissions())).pipe(
  switchMap(permissionCheckResult => {
    if (permissionCheckResult.receive === 'prompt') {
      return defer(() => from(PushNotifications.requestPermissions())).pipe(
        map(permissionRequestResult => permissionRequestResult.receive === 'granted' ? true : false)
      );
    } else if (permissionCheckResult.receive === 'granted') {
      return of(true);
    }
    return of(false);
  }),
  switchMap(permission => {
    if (permission) {
      // 註冊推播
      return defer(() => from(PushNotifications.register())).pipe(
        map(() => permission)
      )
    }
    return of(permission)
  })
);

ngOnInit(): void {
  // 請求使用推送通知的權限
  this.checkAndRequestPermission$.subscribe();

  // 註冊成功後，接收成功的訊息和金鑰
  PushNotifications.addListener('registration', token => {
    console.info('註冊成功，Token: ', token.value);
  });

  // 註冊失敗時，接收失敗訊息
  PushNotifications.addListener('registrationError', err => {
    console.error('註冊失敗: ', err.error);
  });

  // 如果應用程序是打開的狀態，會從這裡接收訊息
  // 如果應用程序推出或是後台的狀態，則不會觸發
  PushNotifications.addListener('pushNotificationReceived', notification => {
    alert(`收到推播: ${JSON.stringify(notification)}`)
  });

  // 點擊通知訊息時調用的方法
  PushNotifications.addListener('pushNotificationActionPerformed', notification => {
    alert('點擊通知訊息！')
  });
}

編譯和執行Android

使用以下指令編譯Android Studio專案後就可以執行APP，進去APP時就會檢查和詢問推播的權限，按下「Allow（允許）」後就可以在「LogCat」上看到Token金鑰囉！
ionic capacitor build android




發送測試FCM推播

應用程式準備就緒後，打開FCM的Messaging頁面並且找到「建立第一個廣告活動」的按鈕，然後選擇「Firebase通知訊息」


建立後在通知的地方輸入「通知標題」和「通知文字」其餘的可以依照需求自己定義，輸入完後按下右手邊「傳送測試訊息」的按鈕

接著把剛才的Token複製進來並且添加

💡如果已經有添加過直接在下方勾選即可

最後按下「測試」按鈕即可完成發送測試推播哦！


最後來測試當APP在後台時收到通知並且點擊的功能



添加推播訊息Icon

預設推播的Icon是一個白色圓圈，修改一下可以讓你的個人化推播可以更吸引使用者的目光哦！首先要準備純白色的去背Icon，接著我們可以用IconKitchen【點我前往】幫我們產生各種大小的圖檔，產生完後直接解壓縮到「android\app\src\main\res」路徑底下即可


💡icon必須是單色的。這是因為它需要能夠在各種不同的背景和主題上顯示

然後再來到這個路徑「android\app\src\main\res\values」底下建立一個「color.xml」檔案並在裡面加入以下程式碼：
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="iconColor">#3D485A</color>
</resources>
💡通知的小圖標被Android系統以白色呈現，而且不能更改為其他顏色，但是可以通過更改顏色來搭配應用程式的主題

最後在「android\app\src\main\AndroidManifest.xml」加入兩個Meta-data：
<meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@minmap/ic_launcher_icon_foreground" />
<meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/iconColor" />
💡「@minmap/ic_launcher_icon_foreground」對應到圖檔的名稱，而「@color/iconColor」則是color.xml裡面的color name名稱

最後重新編譯Android Studio，Icon就完成替換囉！