Ionic Capacitor Notifikasi Push dengan Firebase: Panduan Langkah demi Langkah

In this tutorial, we will integrate push notifications in an Ionic Capacitor app using Firebase. For a maintained Capacitor plugin with Firebase Cloud Messaging support, see @capgo/capacitor-messaging-firebase. Anda tidak memerlukan layanan tertentu untuk ini, tetapi Anda perlu mengonfigurasi beberapa hal sebelumnya. Firebase adalah pilihan yang baik karena diperlukan untuk Android, dan Anda dapat dengan mudah menggunakan Firebase untuk mengirimkan notifikasi tanpa menggunakan database.

Pertama, kita akan membuat aplikasi Ionic dengan Capacitor diaktifkan dan menentukan } package idyang mana merupakan identifikasi unik untuk aplikasi Anda. Kemudian, kita akan membangun aplikasi 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 dapat mengubah capacitor.config.json untuk termasuk aplikasi Anda appId. Namun, jika folder native Anda sudah ada, Anda akan perlu mengganti id di semua file yang menggunakannya, karena Capacitor hanya membuat folder sekali dan tidak akan memperbarui id itu sendiri. Di dalam capacitor.config.json, Anda juga dapat menentukan opsi seperti memperbarui jumlah badge, memainkan suara ketika menerima notifikasi, dan menampilkan peringatan ketika notifikasi datang.

{
  "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 atur notifikasi push di luar aplikasi.

Konfigurasi Firebase

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

If you have a new app, you should see “Mulai dengan menambahkan Firebase ke aplikasi Anda” dalam dashboard aplikasi Anda. Jika tidak, klik ikon gear dan pergi ke pengaturan proyek untuk menambahkan aplikasi.

Dialog untuk kedua iOS dan Android terlihat sama, dan hal yang penting adalah menggunakan id paket Anda untuk aplikasi.

Setelah langkah awal, download file-file berikut:

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

Langkah berikutnya, konfigurasi platform.

Persiapan Push Android

Untuk Android, pindahkan file json-services Google yang Anda download ke folder android/app/ folder.

Itu sudah selesai untuk Android. Sekarang mari kita atur iOS.

google-services.json

Bagian ini lebih rumit. Pertama-tama, Buat ID Aplikasi untuk aplikasi Anda di dalam daftar identifikasi memilih kemampuan Push Notifications dari daftar. Pilih kemampuan Notifikasi Push dari daftar.

ionic-ios-push-id

Sekarang, buatlah Kunci harus sama dengan ID Aplikasi Anda di dalam Capacitor dan Firebase.

Now, Buatlah Kunci dan mengaktifkannya Jasa Pemberitahuan Push Apple (APNs). Jika Anda telah mencapai batas maksimum kunci, Anda dapat menggunakan kunci yang sudah ada atau sertifikat, tetapi prosesnya lebih rumit.

Kunci Pengembang iOS Push

Setelah mengunduh file .p8 , unggah ke Firebase. Buka tab Pengiriman Pesan Cloud di pengaturan proyek Firebase Anda, unggah file tersebut, dan masukkan detail untuk ID Kunci dan ID Tim Anda dari iOS.

Unggah Kunci iOS ke Firebase

Now, make changes to your Xcode project by running:

npx cap open ios

Salin file GoogleService-Info.plist file yang Anda download dari Firebase ke proyek iOS Anda. Drag file ke proyek Xcode di dalam folder app/app, dan 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

Update platform native dengan perintah ini:

npx cap update ios

Modifikasi platform native Swift code di iOS/App/App/AppDelegate.swift untuk mendaftarkan dengan 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 Kemampuan untuk Notifikasi Push di dalam proyek Xcode Anda.

capacitor-xcode-capability

Sekarang, bangun aplikasi Anda dan integrasikan notifikasi push.

Integrasi Notifikasi Push Ionic

Membuat layanan dan halaman baru di proyek Ionic Anda:

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

Mengupdate routing di Aplikasi/app-routing.module.ts untuk mencakup 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 { }

Membuat layanan untuk mengelola notifikasi push di Jasa/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}`);
        }
      }
    );
  }
}

Menggunakan initPush() fungsi di Aplikasi/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();
    });
  }
}

Mengelola informasi di 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();
  }

}

Mengampilkan detail di halaman/halaman-detil/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>

Buat aplikasi, sinkronkan perubahan, dan kirimkannya ke perangkat Anda.

ionic build
npx cap sync

Sekarang, Anda dapat mengirimkan notifikasi push dengan Firebase.

Mengirimkan Notifikasi Push dengan Firebase

Ada beberapa cara untuk mengirimkan notifikasi push dengan Firebase.

Uji Coba Perangkat Tunggal

Setelah mengirimkan aplikasi ke perangkat, Anda dapat memeriksa log konsol untuk melihat token setelah registrasi. Gunakan token ini untuk mengirimkan uji coba push yang spesifik untuk memastikan integrasi Anda berfungsi. Di Firebase, pergi ke Pengiriman Pesan dan pilih Kirim Pesan UjiTambahkan token perangkat dari log.

firebase-test-push

Jika semua pengaturan sudah benar, Anda harus melihat notifikasi push di perangkat Anda.

Pesan Push dengan Payload

Untuk menguji notifikasi push dengan informasi tambahan, ikuti petunjuk di halaman yang sama untuk menentukan informasi umum dan memilih platform yang ingin ditargetkan. Tambahkan opsi tambahan untuk mengirimkan payload dengan notifikasi push Anda.

firebase-push-payload

Dalam Opsi Lanjutan bagian, tambahkan Data Kustom pasangan nilai-kunci. Misalnya, Anda dapat menggunakan kunci detailsId dan nilai pilihan Anda. Data ini akan digunakan di aplikasi untuk menavigasi ke halaman detail dengan id yang ditentukan.

Setelah mengirimkan notifikasi push, aplikasi Anda harus menerima dan menampilkan halaman detail dengan id yang ditentukan ketika notifikasi di-klik.

Menggunakan Firebase API

Anda juga dapat mengirimkan notifikasi push secara programatis menggunakan Firebase API. Untuk melakukan ini, Anda perlu mendapatkan Kunci Server dari pengaturan proyek Firebase Anda di bawah Pengiriman Pesan tab.

With the server key, you can send a POST request to the Firebase API with the required payload. Here’s an example using Node.js and the request dari

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);
  }
});

Cloud Messaging YOUR_SERVER_KEY With YOUR_DEVICE_TOKEN Dengan kunci server asli dan token perangkat Anda. Jalankan skrip, dan perangkat Anda seharusnya menerima notifikasi push dengan payload kustom.

Itu sudah selesai! Anda telah berhasil mengintegrasi notifikasi push di aplikasi Ionic Capacitor Anda menggunakan Firebase. Sekarang Anda dapat mengirimkan notifikasi push ke pengguna Anda di kedua platform Android dan iOS.

Teruskan dari Ionic Capacitor Notifikasi Push dengan Firebase: Panduan Langkah demi Langkah

Jika Anda menggunakan Ionic Capacitor Notifikasi Push dengan Firebase: Panduan Langkah demi Langkah untuk merencanakan migrasi dan operasi bisnis, hubungkannya dengan Capgo Enterprise untuk alur kerja produk di Capgo Enterprise, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, Alternatif Capgo untuk alur kerja produk di Alternatif Capgo, Capgo Konsultasi untuk alur kerja produk di Capgo Konsultasi, dan Capgo Layanan Premium untuk alur kerja produk di Capgo Layanan Premium.

Ionik Capacitor Pemberitahuan Push dengan Firebase: Panduan Langkah demi Langkah