Ionic Capacitor Notifikasi Push dengan Firebase: Panduan Langkah demi Langkah

Dalam tutorial ini, kami akan mengintegrasikan pemberitahuan push di aplikasi Ioni Capacitor menggunakan Firebase. Anda tidak memerlukan layanan khusus untuk ini, tetapi Anda perlu mengonfigurasi beberapa hal sebelumnya. Firebase adalah pilihan yang sangat baik karena diperlukan untuk Android, dan Anda dapat dengan mudah menggunakan Firebase untuk mengirimkan pemberitahuan tanpa menggunakan database.

Pertama, kami akan membuat aplikasi Ioni dengan Capacitor diaktifkan dan menentukan paket ID kami paket id, yang 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 mencakup ID aplikasi Anda. Namun, jika folder native Anda sudah ada, Anda perlu mengganti ID di semua file yang ada, karena __CAPGO_KEEP_0__ hanya membuat folder sekali dan tidak akan memperbarui ID itu sendiri.. However, if your native folders already exist, you will need to replace the id in all files where it appears, as Capacitor only creates the folder once and __CAPGO_KEEP_0__.config.json, Anda juga dapat menentukan opsi seperti memperbarui jumlah badge, memainkan suara ketika menerima push, dan menampilkan peringatan ketika pemberitahuan datang. capacitor.config.jsonKonfigurasi Firebase

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

Konfigurasi Firebase

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

Jika Anda memiliki sebuah aplikasi baru, Anda harus melihat “Get started by adding Firebase to your app” “Mulai dengan menambahkan Firebase ke aplikasi Anda” di 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

Setelah langkah awal, download file-file berikut:

__CAPGO_KEEP_0__ file untuk Android
__CAPGO_KEEP_1__ file untuk iOS

Langkah berikutnya, konfigurasi platform.

Persiapan Push untuk Android

Untuk Android, pindahkan file __CAPGO_KEEP_0__ yang Anda download ke folder __CAPGO_KEEP_2__ /

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

Persiapan Push iOS

Bagian ini lebih rumit. Pertama-tama, buatlah ID Aplikasi untuk aplikasi Anda di dalam daftar identifikasi Anda di akun Pengembang Apple. Pastikan Anda memilih kemampuan Push Notifikasi dari daftar. ionic-ios-push-id ID Paket harus sama dengan ID Aplikasi Anda di dalam __CAPGO_KEEP_0__ dan Firebase.

The Bundle ID should be the same as your App ID within __CAPGO_KEEP_0__ and Firebase.

This part is more complicated. First, create an App ID for your app within the identifiers list should be the same as your App ID within Capacitor and Firebase.

Sekarang, buatlah sebuah Kunci dan aktifkan layanan Pemberitahuan Push Apple (APNs) . Jika Anda telah mencapai batas maksimum kunci, Anda dapat menggunakan kunci yang sudah ada atau sertifikat, tetapi prosesnya lebih rumit.ios-developer-push-key

Setelah mengunduh file

.p8 , unggahlah ke Firebase. Buka tab Cloud Messaging di pengaturan proyek Firebase Anda, unggah file tersebut, dan masukkan detail untuk ID Kunci dan ID Tim dari iOS. firebase-upload-ios-key

Sekarang, buatlah sebuah Kunci dan aktifkan layanan Pemberitahuan Push Apple (APNs). Jika Anda telah mencapai batas maksimum kunci, Anda dapat menggunakan kunci yang sudah ada atau sertifikat, tetapi prosesnya lebih rumit.

Sekarang, buat perubahan pada proyek Xcode Anda dengan menjalankan:

npx cap open ios

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

Berikutnya, 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 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)
            }
        }
    }
}

Akhirnya, tambahkan Kemampuan untuk Notifikasi Push di dalam proyek Xcode Anda.

capacitor-xcode-capability

Sekarang, bangun aplikasi Anda dan integrasikan pemberitahuan push.

Integrasi Pemberitahuan Push Ionic

Buat layanan dan halaman baru di proyek Ionic Anda:

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

Perbarui routing di app/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 { }

Buat layanan untuk mengelola pemberitahuan push 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() fungsi 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();
    });
  }
}

Tangani informasi pada halaman detail di __CAPGO_KEEP_0__:

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 __CAPGO_KEEP_0__:

<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 buatnya tersedia di 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 Perangkat Khusus

Setelah mengirimkan aplikasi ke perangkat, Anda dapat memeriksa log konsol untuk melihat token setelah registrasi. Gunakan token ini untuk mengirimkan uji coba push yang sasaran untuk memastikan integrasi Anda berfungsi. Di Firebase, pergi ke Cloud Messaging dan pilih Kirim pesan uji coba. Tambahkan token perangkat dari log.

firebase-test-push

Jika semua pengaturan sudah benar, Anda seharusnya 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 mengirim payload bersama notifikasi push Anda.

firebase-push-payload

Dalam Opsi Lanjutan bagian, tambahkan Data kustom, pasangan nilai kunci. Misalnya, Anda dapat menggunakan kunci dan nilai pilihan Anda. Data ini akan digunakan di aplikasi untuk menavigasi ke halaman detail dengan id yang ditentukan. detailsId Setelah mengirimkan notifikasi push, aplikasi Anda harus menerima dan menampilkan halaman detail dengan id yang ditentukan ketika notifikasi di-klik.

Menggunakan Firebase __CAPGO_KEEP_0__

Anda juga dapat mengirimkan notifikasi push secara programatis menggunakan Firebase API. Untuk melakukan ini, Anda perlu mendapatkan

You can also send push notifications programmatically using the Firebase API. To do this, you need to obtain the dari pengaturan proyek Firebase Anda di bawah tab Messaging Cloud Dengan kunci server, Anda dapat mengirimkan permintaan POST ke Firebase __CAPGO_KEEP_0__ dengan payload yang diperlukan. Contoh berikut menggunakan Node.js dan library:

library:API request library:__CAPGO_KEEP_1__

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 kunci server Anda yang sebenarnya dan token perangkat. Jalankan skrip, dan perangkat Anda seharusnya menerima notifikasi push dengan payload kustom.

Itu saja! Anda telah berhasil mengintegrasikan notifikasi push di aplikasi Ionic Capacitor Anda menggunakan Firebase. Sekarang Anda dapat mengirimkan notifikasi push kepada pengguna Anda di kedua platform Android dan iOS.

Ioni Capacitor Pemberitahuan Push dengan Firebase: Panduan Langkah demi Langkah