Integrasi Notifikasi Push Capacitor 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-firebase-messagingAnda tidak perlu menggunakan layanan tertentu 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 notifikasi tanpa menggunakan database.

First, we will create an Ionic app with Capacitor enabled and specify our Jika Anda sudah memiliki aplikasi, Anda dapat mengubahCapacitor.config.json

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

untuk mencakup capacitor.config.json __CAPGO_KEEP_0__ ID aplikasi. Namun, jika folder asli Anda sudah ada, Anda akan perlu mengganti id di semua file di mana id tersebut muncul, 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 push, 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.

Jika Anda memiliki aplikasi baru, Anda seharusnya melihat Mulai dengan menambahkan Firebase ke aplikasi Anda di dashboard aplikasi Anda. Jika tidak, klik ikon gear dan pilih pengaturan proyek untuk menambahkan aplikasi. Pengaturan proyek Untuk menambahkan aplikasi.

Dialog untuk iOS dan Android memiliki tampilan yang sama, dan hal yang penting adalah menggunakan ID paket Anda untuk aplikasi. ID paket aplikasi firebase-app-setup-ios

Setelah langkah awal, unduh file-file berikut:

file google-services.json

file untuk Android GoogleService-info.plist
file GoogleService-info untuk Android file untuk iOS

Langkah berikutnya, konfigurasi platform.

Persiapan Push Android

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

Itu saja untuk Android. Sekarang mari kita konfigurasi iOS.

Persiapan Push iOS

Bagian ini lebih rumit. Pertama,

__CAPGO_KEEP_0__ Buat ID Aplikasi untuk aplikasi Anda di dalam daftar identifikasi dari akun pengembang Apple Anda. Pastikan Anda mengaktifkan kemampuan Push Notifications dari daftar.

ionic-ios-push-id

ID Paket harus sama dengan ID Aplikasi Anda di dalam __CAPGO_KEEP_0__ dan Firebase. should be the same as your App ID within Capacitor and Firebase.

buatlah Kunci dan aktifkan layanan Push Notifications Apple (APNs) dari daftar. ionic-ios-push-id. Jika Anda telah mencapai batas maksimal kunci, Anda dapat menggunakan kunci yang sudah ada atau sertifikat, tetapi prosesnya lebih rumit.

Kunci Pengembang iOS

Setelah mengunduh file .p8 Setelah mengunduh file tersebut, unggah ke Firebase. Buka tab Cloud Messaging 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

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 tersebut ke dalam proyek Xcode di folder app/app, dan pilih Salin item jika perlu.

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 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 dalam proyek Xcode Anda.

capacitor-xcode-capability

Sekarang, bangun aplikasi Anda dan integrasikan notifikasi push.

Pengintegrasian Notifikasi Push Ionic

Buat layanan dan halaman baru dalam 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 notifikasi 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 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>

Buat aplikasi, sinkronkan perubahan, dan deploy 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 Khusus

Setelah Anda mengdeploy 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 Uji Coba. Tambahkan token perangkat dari log.

firebase-test-push

Jika semuanya sudah terkonfigurasi dengan benar, Anda seharusnya melihat notifikasi push di perangkat Anda.

Message Push dengan Payload

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

firebase-push-payload

Dalam Opsi Lanjutan bagian, tambahkan sebuah 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 seharusnya menerima dan menampilkan halaman detail dengan id yang ditentukan ketika notifikasi ditekan.

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 di bawah tab Cloud Messaging. Kunci Server dari pengaturan proyek Firebase di bawah tab Cloud Messaging. Cloud Messaging Dengan kunci server, Anda dapat mengirimkan permintaan POST ke Firebase __CAPGO_KEEP_0__ dengan payload yang diperlukan. Contoh penggunaan Node.js dan library:

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

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

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

Capacitor

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

Jika Anda menggunakan Ionic Capacitor Pemberitahuan Push dengan Firebase: Panduan Langkah demi Langkah untuk merencanakan migrasi dan operasi bisnis, hubungkannya dengan Capgo Enterprise for the product workflow in Capgo Enterprise, untuk alur kerja produk di __CAPGO_KEEP_0__ Enterprise, Ionic Enterprise Plugin Alternatives Capgo Alternatives Capgo Alternatif untuk alur kerja produk di Capgo Alternatif, Capgo Konsultasi Bisnis Capgo Layanan Support Premium untuk alur kerja produk di Capgo Layanan Support Premium.

Ionic Capacitor Push Notifications with Firebase: A Step-by-Step Guide