Menambahkan notifikasi push ke aplikasi iOS

Menambahkan notifikasi push ke aplikasi iOS

Tentang codelab ini

subjectTerakhir diperbarui Feb 26, 2025
account_circleDitulis oleh Kanae Matsuguchi

1. Pengantar

Terakhir Diperbarui: 06-01-2020

Firebase Cloud Messaging (FCM) adalah solusi pengiriman pesan lintas platform andal yang dapat Anda gunakan untuk mengirim pesan.

Dengan FCM, Anda dapat memberi tahu aplikasi klien bahwa email baru atau data lainnya tersedia untuk disinkronkan. Anda dapat mengirim pesan notifikasi untuk mendorong interaksi kembali dan retensi pengguna. Untuk kasus penggunaan seperti instant messaging, pesan dapat mentransfer payload hingga 4 KB ke aplikasi klien.

Bagaimana cara kerjanya?

Implementasi FCM mencakup dua komponen utama untuk mengirim dan menerima pesan:

  1. Lingkungan tepercaya seperti Cloud Functions for Firebase atau server aplikasi yang akan digunakan untuk membuat, menargetkan, dan mengirim pesan.
  2. Aplikasi klien iOS, Android, atau web (JavaScript) yang menerima pesan melalui layanan transportasi spesifik platform yang sesuai.

Ringkasan Arsitektur FCM

6636933bbe959ef2.png

FCM mengandalkan serangkaian komponen berikut yang berfungsi untuk mem-build, memindahkan, dan menerima pesan:

  1. Alat untuk menulis atau mem-build permintaan pesan. Notifications composer menyediakan opsi berbasis GUI untuk membuat permintaan notifikasi. Untuk mendapatkan otomatisasi penuh dan dukungan bagi semua jenis pesan, Anda harus mem-build permintaan pesan di lingkungan server tepercaya yang mendukung Firebase Admin SDK atau protokol server FCM. Lingkungan ini dapat berupa Cloud Functions for Firebase, Google App Engine, atau server aplikasi Anda sendiri.
  2. Backend FCM, yang (di antara fungsi lainnya) menerima permintaan pesan, menjalankan fanout pesan melalui topik, dan menghasilkan metadata pesan seperti ID pesan.
  3. Lapisan transportasi level platform, yang merutekan pesan ke perangkat target, menangani pengiriman pesan, dan menerapkan konfigurasi spesifik platform jika sesuai. Lapisan transportasi ini mencakup:
  • Lapisan transportasi Android (ATL) untuk perangkat Android dengan layanan Google Play
  • Layanan Apple Push Notification (APNs) untuk perangkat iOS
  • Protokol Web push untuk aplikasi web
  1. FCM SDK di perangkat pengguna, tempat notifikasi ditampilkan atau pesan ditangani sesuai dengan status latar depan/latar belakang aplikasi dan beragam logika aplikasi yang relevan.

Yang akan Anda bangun

Dalam codelab ini, Anda akan menambahkan notifikasi push ke contoh aplikasi iOS dengan FCM.

Yang akan Anda pelajari

  • Cara berlangganan dan berhenti berlangganan pengguna untuk pesan push
  • Cara menangani pesan push masuk
  • Cara menampilkan notifikasi
  • Cara merespons klik notifikasi

Yang Anda butuhkan

  • Xcode 11.0 atau yang lebih baru
  • CocoaPods 1.9.0 atau yang lebih baru
  • Akun Developer Apple
  • Perangkat iOS fisik untuk menjalankan aplikasi Anda
  • Pengetahuan dasar tentang Swift

2. Mempersiapkan

Download kode contoh

Dalam codelab ini, Anda akan membuat aplikasi pengujian Anda sendiri, tetapi jika ingin melihat dan menjalankan aplikasi contoh yang ada, Anda dapat mendownload kode contoh panduan memulai.

Ada dua cara untuk mendapatkan sampel:

  • Buat clone repositori Git:
$ git clone https://github.com/firebase/quickstart-ios.git
  • Download file ZIP:

Jika Anda mendownload sumber sebagai file ZIP, mengekstraknya akan memberi Anda folder root quickstart-ios.

Buat aplikasi baru

Buat aplikasi pengujian Anda sendiri dengan mengikuti langkah-langkah berikut (langkah-langkah di bawah ada di XCode 12.3):

  1. Buka XCode dan pilih Create a new Xcode project.
  2. Pilih Aplikasi, lalu klik Berikutnya.

e56c631b086c6d8.png

  1. Masukkan Nama Produk (misalnya, MessagingExample)
  2. Pilih Tim (Jika Anda belum membuat Tim, konfigurasikan di Akun Developer Apple).
  3. Masukkan ID Organisasi (mis. com.your-name)
  4. Masukkan Bundle Identifier (mis. com.your-name.MessagingExample, ID ini harus unik di antara semua aplikasi iOS).
  5. Pilih Storyboard di menu tarik-turun Interface.
  6. Pilih UIKit App Delegate di menu drop-down Life Cycle.
  7. Pilih Swift di Bahasa.
  8. Klik Berikutnya.

fb860c0fa4a02818.png

Anda akan memerlukan ID Paket saat membuat kunci APN dan mendaftarkan aplikasi ke project Firebase Anda.

3. Mengonfigurasi APNs

Buat kunci autentikasi

Bagian ini menjelaskan cara membuat kunci autentikasi untuk ID Aplikasi yang diaktifkan untuk Push Notification. Jika sudah memiliki kunci, Anda dapat menggunakannya tanpa perlu membuat kunci baru.

Untuk membuat kunci autentikasi:

  1. Di akun developer Anda, buka Certificates, Identifiers & Profiles, lalu buka Keys.

19ae87d0f00402b1.png

  1. Klik tombol Tambahkan (+) di pojok kanan atas.

c4acd10dbc4f721f.png

  1. Masukkan deskripsi untuk Kunci Autentikasi APNs
  2. Di bagian Key Services, pilih kotak centang APNs, lalu klik Continue.

6a3e8ff7457a8251.png

  1. Klik Daftar, lalu klik Download. Simpan kunci Anda di tempat yang aman. Download hanya dilakukan sekali dan kuncinya tidak dapat diambil lagi.

42c205e072fbd622.png

Buat ID Aplikasi

ID Aplikasi adalah ID yang mengidentifikasi aplikasi secara unik. Sebagai konvensi, ID ini diwakili oleh domain terbalik.

  1. Buka Apple Developer Member Center dan login.
  2. Buka Certificates, Identifiers & Profiles.
  3. Buka ID.
  4. Klik tombol + untuk membuat ID Aplikasi baru. e04fc394c52a866f.png
  5. Pilih tombol pilihan ID Aplikasi, lalu klik Lanjutkan.

d454fd5df3b8d93d.png

  1. Pilih Aplikasi, lalu klik Lanjutkan.

3bd2e836be5e0291.png

  1. Untuk membuat ID Aplikasi baru:
  2. Masukkan Nama untuk ID Aplikasi Anda.
  3. Masukkan Team ID. Nilai ini harus sama dengan Team ID di tab Membership.
  4. Di bagian App ID Suffix, pilih Explicit App ID, lalu masukkan Bundle ID Anda. 7363c4d1962b486d.png
  5. Di bagian App Services, pastikan Push Notifications dicentang. 552ea08703f7e323.png
  6. Klik Lanjutkan dan pastikan nilai yang Anda masukkan sudah benar:
  7. Nilai Identifier harus cocok dengan rangkaian nilai-nilai Team ID dan Bundle ID
  8. Push Notifications harus Configurable
  9. Klik Register untuk membuat ID Aplikasi.

Buat Profil

Untuk menguji aplikasi ketika sedang dikembangkan, Anda memerlukan Profil untuk pengembangan guna mengizinkan perangkat Anda menjalankan aplikasi yang belum dipublikasikan di App Store.

  1. Buka Apple Developer Member Center dan login.
  2. Buka Certificates, Identifiers & Profiles.
  3. Di menu drop-down di pojok kiri atas, pilih iOS, tvOS, watchOS jika belum dipilih, lalu buka Profiles.
  4. Klik tombol + untuk membuat Profil baru. 1fa2342cfe45a925.png
  5. Pilih iOS App Development sebagai tipe profil penyediaan, lalu klik Continue.

507434a466220dfe.png

  1. Di menu drop-down, pilih ID Aplikasi yang ingin Anda gunakan, lalu klik Lanjutkan.
  2. Pilih sertifikat iOS Development dari ID Aplikasi yang Anda pilih pada langkah sebelumnya, lalu klik Continue.
  3. Pilih perangkat iOS yang ingin Anda sertakan dalam Profil Penyediaan, lalu klik Lanjutkan. Pastikan Anda memilih semua perangkat yang ingin digunakan dalam pengujian.
  4. Masukkan nama untuk profil penyediaan ini (misalnya, MessagingExampleProfile), lalu klik Generate.

4395f04647afa997.png

  1. Klik Download untuk menyimpan Profil Penyediaan di Mac Anda.

106761fa786ba580.png

  1. Klik dua kali file Profil Penyediaan untuk menginstalnya.

4. Menambahkan Firebase ke project iOS

Membuat project Firebase

Agar dapat menambahkan Firebase ke aplikasi iOS, Anda perlu membuat project Firebase yang akan dihubungkan ke aplikasi iOS. Buka bagian Memahami Project Firebase untuk mempelajari project Firebase lebih lanjut.

  1. Di Firebase console, klik Tambahkan project, lalu pilih atau masukkan Nama project. e462afd91c149238.png

Jika sudah memiliki project Google Cloud Platform (GCP), Anda dapat memilih project dari menu dropdown untuk menambahkan resource Firebase ke project tersebut.

  1. (Opsional) Jika membuat project baru, Anda dapat mengedit Project ID.

Firebase otomatis menetapkan ID unik ke project Firebase Anda. Buka bagian Memahami Project Firebase untuk mempelajari cara Firebase menggunakan project ID.

  1. Klik Lanjutkan.
  2. Siapkan Google Analytics untuk project Anda dan optimalkan penggunaan produk-produk Firebase berikut:
  • Firebase Crashlytics
  • Firebase Predictions
  • Firebase Cloud Messaging
  • Firebase In-App Messaging
  • Firebase Remote Config
  • Firebase A/B Testing

Saat diminta, pilih untuk menggunakan akun Google Analytics yang ada atau membuat akun baru. Jika Anda memilih untuk membuat akun baru, pilih lokasi pelaporan Analytics Anda, lalu setujui setelan berbagi data dan persyaratan Google Analytics untuk project Anda.

1282a798556779ab.png

48ade68c8de27d2.png

  1. Klik Buat project (atau Tambahkan Firebase, jika Anda menggunakan project GCP yang sudah ada).

Firebase otomatis menyediakan resource untuk project Firebase Anda. Setelah selesai, Anda akan dibawa ke halaman ringkasan untuk project Firebase Anda di Firebase console.

Mendaftarkan aplikasi Anda ke Firebase

Setelah memiliki project Firebase, Anda dapat menambahkan aplikasi iOS ke dalamnya.

Buka bagian Memahami Project Firebase untuk mempelajari lebih lanjut praktik terbaik dan pertimbangan dalam menambahkan aplikasi ke project Firebase, termasuk cara menangani beberapa varian build.

  1. Buka Firebase console.
  2. Di bagian tengah halaman ringkasan project, klik ikon iOS untuk meluncurkan alur kerja penyiapan.

Jika Anda sudah menambahkan aplikasi ke project Firebase, klik Tambahkan aplikasi untuk menampilkan opsi platform.

93462beb642e8987.png

  1. Masukkan ID paket aplikasi Anda di kolom ID paket iOS.
  2. (Opsional) Masukkan informasi lain aplikasi: Nama panggilan aplikasi dan ID App Store.
  3. Klik Daftarkan aplikasi.

2e7a00b0008344c1.png

Tambahkan file konfigurasi Firebase

  1. Klik Download GoogleService-Info.plist untuk mendapatkan file konfigurasi iOS Firebase Anda (GoogleService-Info.plist). 69004caf7d448989.png
  2. Pindahkan file konfigurasi ke root project Xcode Anda. Jika diminta, pilih untuk menambahkan file konfigurasi ke semua target.

7c5e0a46d07fa9c7.png

Jika ada beberapa ID paket dalam project, Anda harus mengaitkan setiap ID paket dengan aplikasi yang terdaftar di Firebase console, sehingga setiap aplikasi dapat memiliki file GoogleService-Info.plist sendiri.

Tutup XCode.

Tambahkan Firebase SDK ke aplikasi Anda

Sebaiknya gunakan CocoaPods untuk menginstal library Firebase. Namun, jika tidak ingin menggunakan CocoaPods, Anda dapat mengintegrasikan framework SDK secara langsung atau menggunakan Swift Package Manager versi beta.

  1. Buat Podfile jika Anda belum memilikinya. Jika Anda menggunakan contoh panduan memulai, project Xcode dan Podfile (dengan pod) sudah tersedia.
$ cd MessagingExample
$ pod init
  1. Tambahkan pod Firebase yang ingin digunakan dalam aplikasi Anda ke Podfile tersebut.

Anda dapat menambahkan produk Firebase yang didukung ke aplikasi iOS.

Dalam contoh panduan memulai, SDK Google Analytics dan Firebase Cloud Messaging telah ditambahkan.

# Add the Firebase pod for Google Analytics
pod 'Firebase/Analytics'

# Add the pod for Firebase Cloud Messaging
pod 'Firebase/Messaging'
  1. Instal pod, lalu buka file .xcworkspace untuk melihat project di Xcode:
$ pod install
  1. Buka MessagingExample.xcworkspace, lalu klik Next di Firebase console. 6d1f8230d16693e6.png

Lakukan inisialisasi Firebase di aplikasi Anda

Anda harus menambahkan kode inisialisasi Firebase ke aplikasi.

Impor modul Firebase dan konfigurasikan instance bersama (Dalam contoh panduan memulai, modul Firebase sudah diimpor).

  1. Impor modul Firebase di UIApplicationDelegate Anda:

AppDelegate.swift

import UIKit
import Firebase // Add this line
  1. Konfigurasikan instance bersama FirebaseApp, biasanya ada dalam metode application:didFinishLaunchingWithOptions: aplikasi Anda:

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  FirebaseApp.configure() // Add this line
  return true
}
  1. Klik Next di Firebase console. f9d37423d346ff0.png
  2. Firebase SDK ditambahkan ke aplikasi Anda. Klik Continue to console. d1b1309cd3790f66.png

5. Mengonfigurasi klien FCM

Mengupload kunci autentikasi APNs Anda

Upload kunci autentikasi APNs Anda ke Firebase.

  1. Pada project Anda di Firebase console, pilih ikon roda gigi, pilih Project Settings, lalu pilih tab Cloud Messaging. ba8b5f95241327fe.png
  2. Di APNs authentication key di bagian iOS app configuration, klik tombol Upload. 357ddc0d4b182492.png
  3. Cari lokasi penyimpanan kunci, pilih lokasi tersebut, lalu klik Open. Tambahkan ID kunci untuk kunci tersebut (tersedia di Certificates, Identifiers & Profiles di Apple Developer Member Center), lalu klik Upload. 3dae27f2327daf9e.png

Mendaftar untuk notifikasi jarak jauh

Saat aplikasi dimulai, atau pada waktu lain yang diinginkan dalam alur aplikasi, daftarkan aplikasi Anda untuk mengaktifkan notifikasi jarak jauh.

Dalam contoh panduan memulai, registerForRemoteNotifications sudah ditambahkan.

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  FirebaseApp.configure()
  // [START register for remote notifications]
  if #available(iOS 10.0, *) {
    // For iOS 10 display notification (sent via APNS)
    UNUserNotificationCenter.current().delegate = self
       
    let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
    UNUserNotificationCenter.current().requestAuthorization(options: authOptions, completionHandler: {_, _ in })
  } else {
    let settings: UIUserNotificationSettings = UIUserNotificationSettings(types: [.alert, .badge, .sound], categories: nil)
    application.registerUserNotificationSettings(settings)
  }

  application.registerForRemoteNotifications()
  // [END register for remote notifications]
  return true
}

Tetapkan properti delegasi UNUserNotificationCenter dengan menambahkan baris ini di akhir AppDelegate.swift.

AppDelegate.swift

@available(iOS 10, *)
extension AppDelegate : UNUserNotificationCenterDelegate {

  // Receive displayed notifications for iOS 10 devices.
  func userNotificationCenter(_ center: UNUserNotificationCenter,
                              willPresent notification: UNNotification,
    withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
    let userInfo = notification.request.content.userInfo

    // Print full message.
    print(userInfo)

    // Change this to your preferred presentation option
    completionHandler([[.alert, .sound]])
  }

  func userNotificationCenter(_ center: UNUserNotificationCenter,
                              didReceive response: UNNotificationResponse,
                              withCompletionHandler completionHandler: @escaping () -> Void) {
    let userInfo = response.notification.request.content.userInfo

    // Print full message.
    print(userInfo)

    completionHandler()
  }
}

Menetapkan delegasi pesan

Untuk menerima token pendaftaran, terapkan protokol delegasi pesan dan tetapkan properti delegate dari FIRMessaging setelah memanggil [FIRApp configure]. Misalnya, jika delegasi aplikasi Anda sesuai dengan protokol delegasi pesan, Anda dapat menetapkan delegasi di application:didFinishLaunchingWithOptions: ke properti itu sendiri (Dalam contoh panduan memulai, delegasi sudah ditetapkan).

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  FirebaseApp.configure()
  Messaging.messaging().delegate = self // Add this line
  // [START register for remote notifications]
  if #available(iOS 10.0, *) {
    // For iOS 10 display notification (sent via APNS)
    UNUserNotificationCenter.current().delegate = self
       
    let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
    UNUserNotificationCenter.current().requestAuthorization(options: authOptions, completionHandler: {_, _ in })
  } else {
    let settings: UIUserNotificationSettings = UIUserNotificationSettings(types: [.alert, .badge, .sound], categories: nil)
    application.registerUserNotificationSettings(settings)
  }

  application.registerForRemoteNotifications()
  // [END register for remote notifications]
  return true
}

Tetapkan properti delegasi FIRMessaging dengan menambahkan baris ini di akhir AppDelegate.swift.

AppDelegate.swift

extension AppDelegate : MessagingDelegate {
  func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
    print("Firebase registration token: \(String(describing: fcmToken))")
   
    let dataDict:[String: String] = ["token": fcmToken ?? ""]
    NotificationCenter.default.post(name: Notification.Name("FCMToken"), object: nil, userInfo: dataDict)
  }
}

Menambahkan Kemampuan

Anda telah menambahkan kemampuan Notifikasi Push di bagian Membuat ID Aplikasi, tetapi Anda juga harus menambahkan kemampuan ini di XCode dengan langkah-langkah berikut (langkah-langkah di bawah ini ada di XCode 12.3):

  1. Klik nama project di Area Navigator.
  2. Klik Signing & Capabilities.
  3. Klik + Kemampuan.

eaf41aefb3bf2c9e.png

  1. Klik dua kali Background Modes.
  2. Klik + Kemampuan lagi.
  3. Klik dua kali Notifikasi Push.
  4. Centang Remote notifications di bagian Background Modes.

e5d0fc08651e04a9.png

6. Mengirim pesan notifikasi

Anda dapat mengirim pesan uji dengan langkah-langkah berikut:

  1. Instal dan jalankan aplikasi di perangkat target. Anda harus menyetujui permintaan izin untuk menerima notifikasi jarak jauh.
  2. Dapatkan token pendaftaran di log XCode.

a2e49a92f9807d34.png

  1. Pastikan aplikasi berjalan di latar belakang pada perangkat.
  2. Buka Notifications composer, lalu pilih New notification.
  3. Masukkan teks pesan. f485d7fbd2456ae0.png
  4. Pilih Kirim pesan pengujian.
  5. Dalam kolom yang berlabel Add an FCM registration token, masukkan token pendaftaran yang Anda peroleh pada langkah 2.
  6. Klik Uji.

Setelah Anda mengklik Uji, perangkat klien yang ditargetkan (dengan aplikasi berada di latar belakang) akan menerima notifikasi di pusat notifikasi.

Untuk menganalisis pengiriman pesan ke aplikasi Anda, lihat dasbor pelaporan FCM, yang mencatat jumlah pesan yang terkirim dan dibuka di perangkat iOS dan Android.

6570eea7b5228513.png

7. Selamat

Selamat, Anda telah berhasil mengirim pesan percobaan.

Ada banyak fungsi dan konfigurasi lainnya di FCM seperti langganan topik.

Lihat dokumen developer resmi jika Anda tertarik.

Apa selanjutnya?

Lihat beberapa codelab ini.

Bacaan lebih lanjut