Push Notification di Ionic 6 dengan FCM Plugin

Untuk membuat push notifcation di ionic kita dapat memanfaatkan plugin FCM (Firebase Cloud Messaging) yang terdapat di dokumentasi ionic framework.

https://ionicframework.com/docs/native/fcm

Menyiapkan Google Firebase Cloud Messaging

Untuk menyiapkan FCM, kita dapat mengakses website google firebase di link https://firebase.google.com/. *Sebelumnya pastikan kalian sudah pernah membuat akun firebase dan sudah login.

Klik “Buka Konsol” di bagian atas.

Berikutnya klik “Add Project” untuk menambah project firebase.

Masukkan Project Name misalnya “Test FCM”, lalu klik Continue.

Pada halaman ini, kita akan ditanya apakah ingin mengenable google analytic ke project firebase kita. Jika ya, maka biarkan “Enable Google Analytics for this project” aktif atau berwarna biru lalu klik “Continue”

Jika sebelumnya kita mengenable google analytic pada project firebase kita, maka pada form berikut, pilih akun Google Analytic atau membuat akun baru, lalu klik “Create project”

Tunggu sampai proses creating project selesai. lalu klik “Continue” jika sudah selesai. Disini kita sudah berhasil membuat project di firebase.

Di halaman utama project firebase kita, klik > Project Setting pada menu sebelah kiri

Pada tab General scroll ke bawah sampai terlihat bagian “Your apps“. Pilih platform yang akan kita gunakan. Pada contoh kali ini kita akan mencoba untuk platform android. Klik icon Android.

Berikutnya, pada form “Android package name” isi sesuai application id project ionic yang nanti akan kita buat. Sebagai contoh kalian dapat mengisinya dengan “io.ionic.starter“

Untuk “App nickname (optional)” dapat kita isi bebas. Disini saya mengisi dengan “test FCM”

Untuk “Debug signing certificate SHA-1 (optional)help_outline” dapat kita kosongkan saja.

Jika sudah, klik tombol Register App.

Jika kalian sebelumnya sudah membuat project ionic. Kalian dapat mengecek application id pada file “capacitor.config.ts“

Klik tombol “Download google-service.json“. Jika sudah berhasil download klik tombol “Next“

Pada tahap berikut. kita dapat langsung klik tombol “Next“.

Tahap terakhir klik tombol “Continue to console” dan kita telah berhasil menambahkan platform android ke project firebase.

Membuat Project Ionic

Setelah berhasil membuat project firebase. Berikutnya kita akan membuat project ionic.

Buka CLI kalian. lalu jalankan perintah untuk membuat project ionic

ionic start testFCM blank --type=angular --capacitor --package-id=io.ionic.starter

pada perintah di atas, –package-id adalah application id untuk project ionic kita.

Sekarang masuk ke folder project ionic yang telah kita buat

cd tstFCM

Tambahkan platform Android ke project ionic.

ionic capacitor add android

Install plugin FCM ke project ionic

npm install cordova-plugin-fcm-with-dependecy-updated
npm install @ionic-native/fcm
ionic capacitor sync

Buka file app.module.ts dan import plugin FCM menjadi seperti berikut

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {FCM} from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    FCM,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

pada kasus ini, sebagai contoh kita akan menjalankan FCM di page home yang sudah tersedia pada project.

buka file home.page.ts lalu masukkan kodingan seperti berikut

import { Component } from '@angular/core';

import { INotificationPayload } from 'cordova-plugin-fcm-with-dependecy-updated';
import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public hasPermission: boolean;
  public token: string;
  public pushPayload: INotificationPayload;

  constructor(
    private fcm: FCM
  ) {
    this.setupFCM();
  }

  private async setupFCM() {

    // Memperbaharui Token
    this.fcm.onTokenRefresh().subscribe((newToken) => {
      this.token = newToken;
      console.log('onTokenRefresh received event with: ', newToken);
    });

    // Menerima Notifikasi
    this.fcm.onNotification().subscribe((payload) => {
      this.pushPayload = payload;
      console.log('onNotification received event with: ', payload);
    });


    this.hasPermission = await this.fcm.requestPushPermission();
    console.log('requestPushPermission result: ', this.hasPermission);

    // Mendapatkan Token
    this.token = await this.fcm.getToken();
    console.log('getToken result: ', this.token);


    // Menerima data pesan jika notifikasi di tap atau aplikasi sedang terbuka
    this.pushPayload = await this.fcm.getInitialPushPayload();
    console.log('getInitialPushPayload result: ', this.pushPayload);

    // Topic notifikasi
    this.fcm.subscribeToTopic('testing');

  }

  public get pushPayloadString() {
    return JSON.stringify(this.pushPayload, null, 4);
  }

}

Sekarang untuk kodingan kita sudah bisa menerima notifikasi ke project ionic.

Sebagai tambahan untuk menampilkan feedback dari notifikasi firebase. coba buka home.page.html. tambahkan kode berikut.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>FCM</strong>
    <div>hasPermission: {{hasPermission}}</div>
    <br />
    <div>token: {{token}}</div>
    <br />
    <div>last push payload:<pre>{{pushPayloadString}}</pre></div>
  </div>
</ion-content>

Berikutnya, sebelum membuil apk, salin file “google-service.json” ke folder android > app

Jalankan perintah berikut di CLI untuk mensikronkan data ionic kita ke platform.

ionic capacitor sync

lalu salin kembali file “google-service.json” ke folder android > capacitor-cordova-android-plugins.

Sekarang buka file AndroidManifest.xml di folder android > capacitor-cordova-android-plugins > src > main

ubah bagian yang ditunjuk pada gambar dengan application id project kita

Sekarang kita sudah bisa build project ionic kita ke apk android.

Test Send Notification

Untuk melakukan test sending notification, kita bisa menggunakan aplikasi Postman di laptop / komputer.

Pada bagian URL masukkan “https://fcm.googleapis.com/fcm/send“

Bagian Header masukkan key dan value

untuk {{key_token}} kita bisa dapatkan di firebase dengan mengakses Project Overview > Project Settings > Cloud Messaging. Lalu salin server key

Sekarang kembali ke aplikasi postman. pada bagian body, ubah menjadi JSON, lalu masukkan kode berikut

{
    "notification":{
        "title":"Testing",
        "body":"Testing notification",
        "sound":"default",
        "click_action":"FCM_PLUGIN_ACTIVITY",
        "icon":"fcm_push_icon"
    },
    "to":"/topics/testing",
    "priority":"high",
    "restricted_package_name":""
}

Pada bagian "to": "/topics/testing". testing merupakan topic yang telah kita masukkan sebelumnya pada project ionic kita di atas.

Jika ingin mengirim data ke notifikasi, kita bisa tambahkan property “data” menjadi seperti berikut

{
    "notification":{
        "title":"Testing",
        "body":"Testing notification",
        "sound":"default",
        "click_action":"FCM_PLUGIN_ACTIVITY",
        "icon":"fcm_push_icon"
    },
    "data":{
      "produk":"buku",
      "harga":200000
    },
    "to":"/topics/testing",
    "priority":"high",
    "restricted_package_name":""
}