Ionic Capacitor Notifikasi Push dengan Firebase: Panduan Langkah demi Langkah

Dalam tutorial ini, kita akan mengintegrasikan push notifications pada aplikasi Ionic Capacitor menggunakan Firebase. Untuk Capacitor plugin yang terawat dengan dukungan Firebase Cloud Messaging, lihat @capgo/capacitor-firebase-messaging. Anda tidak memerlukan layanan khusus untuk ini, tetapi Anda perlu mengonfigurasi beberapa hal sebelumnya. Firebase adalah pilihan tepat karena wajib untuk Android, dan Anda bisa menggunakannya dengan mudah untuk mengirim notifikasi tanpa perlu menggunakan database.

Pertama, kita akan membuat aplikasi Ionic dengan Capacitor yang aktif dan menentukan package id, yang merupakan pengenal unik untuk aplikasi Anda. Kemudian, kita akan build aplikasinya dan menambahkan platform native.

ionic start pushApp blank --type=angular --capacitor --package-id=com.appdactic.devpush
cd ./pushApp
ionic build
npx cap add ios
npx cap add android

Jika Anda sudah memiliki aplikasi, Anda bisa mengubah capacitor.config.json untuk menyertakan appId. Namun, jika folder native Anda sudah ada, Anda perlu mengganti id di semua file tempat id tersebut muncul, karena Capacitor hanya membuat folder satu kali dan tidak akan memperbarui id itu sendiri. Di dalam capacitor.config.json, Anda juga bisa menentukan opsi seperti memperbarui badge count, memutar suara saat push, dan menampilkan alert saat notifikasi masuk.

{
  "appId": "com.appdactic.devpush",
  "appName": "pushApp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    },
    "PushNotifications": {
      "presentationOptions": ["badge", "sound", "alert"]
    }
  },
  "cordova": {}
}

Sekarang, mari kita konfigurasi push notifications di luar aplikasi.

Konfigurasi Firebase

Mulai dengan membuat proyek Firebase baru atau menggunakan yang sudah ada. Masukkan nama dan opsi default untuk proyek baru.

Jika Anda memiliki aplikasi baru, Anda akan melihat “Mulai dengan menambahkan Firebase ke aplikasi Anda” di dashboard aplikasi Anda. Jika tidak, klik ikon gear dan buka pengaturan proyek untuk menambah aplikasi.

Dialog untuk iOS dan Android terlihat mirip, yang terpenting adalah gunakan package id untuk aplikasi tersebut.

Setelah langkah awal, download file berikut:

google-services.json file untuk Android
GoogleService-info.plist file untuk iOS

Selanjutnya, konfigurasikan platformnya.

Persiapan Push Android

Untuk Android, pindahkan file google-services.json yang sudah diunduh ke android/app/ folder.

Itu saja untuk Android. Sekarang mari konfigurasi iOS.

Persiapan Push iOS

Bagian ini lebih rumit. Pertama, buat App ID untuk aplikasi Anda di daftar identifiers pada akun Apple Developer Anda. Pastikan Anda memilih capability Push Notifications dari daftar tersebut.

ionic-ios-push-id

Panduan Bundle ID harus sama dengan App ID Anda di Capacitor dan Firebase.

Sekarang, buat sebuah Key dan aktifkan Apple Push Notifications service (APNs). Jika Anda sudah mencapai batas maksimal key, Anda bisa menggunakan key yang sudah ada atau sertifikat, tapi prosesnya lebih rumit.

ios-developer-push-key

Setelah mengunduh file .p8 , upload ke Firebase. Buka Cloud Messaging buka tab di pengaturan proyek Firebase Anda, upload filenya, lalu masukkan detail Key ID dan Team ID dari iOS Anda.

firebase-upload-ios-key

Sekarang, buat perubahan pada proyek Xcode Anda dengan menjalankan:

npx cap open ios

Salin GoogleService-Info.plist file yang Anda download dari Firebase ke dalam proyek iOS Anda. Drag file tersebut ke dalam proyek Xcode di folder app/app, lalu pilih Salin item jika diperlukan.

Selanjutnya, tambahkan Pod baru untuk dependensi Firebase di ios/App/Podfile:

target 'App' do
  capacitor_pods
  # Add your Pods here
  pod 'Firebase/Messaging'
end

Perbarui platform native dengan perintah ini:

npx cap update ios

Modifikasi file Swift native code di ios/App/App/AppDelegate.swift untuk mendaftar ke Firebase dan mengembalikan token yang benar ke aplikasi Anda.

import UIKit
import Capacitor
import Firebase

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    FirebaseApp.configure()
    return true
  }

  // All the existing functions
  // ...

  // Update this one:
    func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
        Messaging.messaging().apnsToken = deviceToken
        InstanceID.instanceID().instanceID { (result, error) in
            if let error = error {
                NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidFailToRegisterForRemoteNotificationsWithError.name()), object: error)
            } else if let result = result {
                NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidRegisterForRemoteNotificationsWithDeviceToken.name()), object: result.token)
            }
        }
    }
}

Terakhir, tambahkan Capability untuk Push Notifications di dalam proyek Xcode Anda.

capacitor-xcode-capability

Sekarang, build aplikasi Anda dan integrasikan push notifications.

Integrasi Push Notification Ionic

Buat service dan halaman baru di proyek Ionic Anda:

ionic g service services/fcm
ionic g page pages/details

Update routing di app/app-routing.module.ts untuk menyertakan halaman baru dengan ID dinamis:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home/:id',
    loadChildren: () => import('./pages/details/details.module').then( m => m.DetailsPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Buat service untuk menangani push notifications di services/fcm.service.ts:

import { Injectable } from '@angular/core';
import {
  Plugins,
  PushNotification,
  PushNotificationToken,
  PushNotificationActionPerformed,
  Capacitor
} from '@capacitor/core';
import { Router } from '@angular/router';

const { PushNotifications } = Plugins;

@Injectable({
  providedIn: 'root'
})
export class FcmService {

  constructor(private router: Router) { }

  initPush() {
    if (Capacitor.platform !== 'web') {
      this.registerPush();
    }
  }

  private registerPush() {
    PushNotifications.requestPermission().then((permission) => {
      if (permission.granted) {
        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register();
      } else {
        // No permission for push granted
      }
    });

    PushNotifications.addListener(
      'registration',
      (token: PushNotificationToken) => {
        console.log('My token: ' + JSON.stringify(token));
      }
    );

    PushNotifications.addListener('registrationError', (error: any) => {
      console.log('Error: ' + JSON.stringify(error));
    });

    PushNotifications.addListener(
      'pushNotificationReceived',
      async (notification: PushNotification) => {
        console.log('Push received: ' + JSON.stringify(notification));
      }
    );

    PushNotifications.addListener(
      'pushNotificationActionPerformed',
      async (notification: PushNotificationActionPerformed) => {
        const data = notification.notification.data;
        console.log('Action performed: ' + JSON.stringify(notification.notification));
        if (data.detailsId) {
          this.router.navigateByUrl(`/home/${data.detailsId}`);
        }
      }
    );
  }
}

Panggil initPush() function di app/app.component.ts:

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

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { FcmService } from './services/fcm.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private fcmService: FcmService
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      // Trigger the push setup
      this.fcmService.initPush();
    });
  }
}

Kelola informasi pada halaman detail di pages/details/details.page.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Plugins } from '@capacitor/core';
const { PushNotifications } = Plugins;

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
  id = null;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.id = params.get('id');
    });
  }

  resetBadgeCount() {
    PushNotifications.removeAllDeliveredNotifications();
  }

}

Tampilkan detail di pages/details/details.page.html:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Details</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  My Id from push: {{ id }}

  <ion-button (click)="resetBadgeCount()" expand="block">
    Reset Badge Count
  </ion-button>
</ion-content>

Build app, sync perubahan, dan deploy ke perangkat Anda.

ionic build
npx cap sync

Sekarang, Anda bisa mengirim push notification dengan Firebase.

Mengirim Push Notification dengan Firebase

Ada beberapa cara untuk mengirim push notification menggunakan Firebase.

Tes Perangkat Spesifik

Setelah deploy aplikasi ke perangkat, Anda bisa cek console logs untuk melihat token setelah registrasi. Gunakan token ini untuk mengirim test push yang ditargetkan guna memastikan integrasi berjalan lancar. Di Firebase, buka Cloud Messaging dan pilih Kirim pesan uji coba. Masukkan device token dari logs.

firebase-test-push

Jika semua sudah dikonfigurasi dengan benar, push notification akan muncul di perangkat Anda.

Push Message dengan Payload

Untuk menguji push notification dengan informasi tambahan, ikuti wizard di halaman yang sama untuk menentukan info umum dan pilih platform target Anda. Tambahkan opsi tambahan untuk mengirim payload bersama push notification Anda.

firebase-push-payload

Di Opsi lanjutan pada bagian, tambahkan Data kustom key-value pair. Contohnya, Anda bisa menggunakan key detailsId dan value pilihan Anda. Data ini akan digunakan di dalam app untuk navigasi ke halaman detail dengan id tersebut.

Setelah mengirim push notification, aplikasi Anda harus dapat menerimanya dan menampilkan halaman detail dengan id yang ditentukan saat notifikasi tersebut diketuk.

Menggunakan Firebase API

Anda juga bisa mengirim push notification secara terprogram menggunakan library Firebase API. Untuk melakukannya, Anda perlu mendapatkan Kunci server dari pengaturan proyek Firebase Anda di bawah tab Cloud Messaging .

Dengan server key itu, Anda bisa mengirim request POST ke Firebase API dengan payload yang diperlukan. Berikut contohnya menggunakan Node.js dan request library:

const request = require('request');

const serverKey = 'YOUR_SERVER_KEY';
const deviceToken = 'YOUR_DEVICE_TOKEN';

const options = {
  method: 'POST',
  url: 'https://fcm.googleapis.com/fcm/send',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'key=' + serverKey
  },
  body: JSON.stringify({
    to: deviceToken,
    notification: {
      title: 'Test Push',
      body: 'This is a test push notification with custom data'
    },
    data: {
      detailsId: '123'
    }
  })
};

request(options, (error, response, body) => {
  if (error) {
    console.error('Error sending push:', error);
  } else {
    console.log('Push sent successfully:', body);
  }
});

Ganti YOUR_SERVER_KEY dan YOUR_DEVICE_TOKEN dengan server key dan device token Anda yang sebenarnya. Jalankan script-nya, dan perangkat Anda seharusnya menerima push notification dengan custom payload.

Selesai! Anda berhasil mengintegrasikan push notification di aplikasi Ionic Capacitor menggunakan Firebase. Sekarang Anda bisa mengirim push notification ke pengguna di platform Android dan iOS.

Lanjutkan membaca Ionic Capacitor Push Notifications dengan Firebase: Panduan Langkah demi Langkah

Jika Anda menggunakan Ionic Capacitor Notifikasi Push dengan Firebase: Panduan Langkah demi Langkah untuk merencanakan migrasi dan operasional enterprise, hubungkan dengan Capgo Enterprise untuk workflow produk di Capgo Enterprise, Alternatif Plugin Ionic Enterprise untuk workflow produk di Alternatif Plugin Ionic Enterprise, Alternatif Capgo untuk alur kerja produk di Alternatif Capgo, Konsultasi Capgo untuk alur kerja produk di Capgo Consulting, dan Dukungan Premium Capgo untuk alur kerja produk di Capgo Premium Support.