Menambahkan notifikasi push ke aplikasi iOS

1. Pengantar

Terakhir diperbarui: 6-1-2020

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

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

Bagaimana cara kerjanya?

Implementasi FCM mencakup dua komponen utama untuk mengirim dan menerima:

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

Ringkasan Arsitektur FCM

FCM bergantung pada serangkaian komponen berikut yang membangun, memindahkan, dan menerima pesan:

1. Alat untuk menulis atau membangun permintaan pesan. Notifications Composer menyediakan opsi berbasis GUI untuk membuat permintaan notifikasi. Untuk otomatisasi penuh dan dukungan untuk semua jenis pesan, Anda harus membangun 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 yang ditargetkan, menangani pengiriman pesan, dan menerapkan konfigurasi spesifik per platform jika sesuai. Lapisan transport ini mencakup:

• Lapisan transportasi Android (ATL) untuk perangkat Android dengan layanan Google Play
• Layanan Apple Push Notification (APN) untuk perangkat iOS
• Protokol web push untuk aplikasi web

Catatan: Lapisan transportasi level platform berada di luar layanan FCM. Pesan FCM yang dirutekan ke lapisan transpor level platform mungkin tunduk kepada persyaratan khusus untuk platform tersebut, bukan persyaratan layanan FCM. Perutean pesan Android melalui ATL tercakup dalam persyaratan layanan Google API.

4. FCM SDK di perangkat pengguna, tempat notifikasi ditampilkan atau pesan ditangani sesuai dengan status latar depan/latar belakang aplikasi dan 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 menghentikan langganan pengguna untuk pengiriman pesan push
• Cara menangani pesan push yang 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 membangun aplikasi pengujian sendiri, tetapi jika ingin melihat dan menjalankan aplikasi contoh yang sudah 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.

Download kode sumber

Membuat aplikasi baru

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

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

3. Masukkan Nama Produk (misalnya, MessagingExample)
4. Pilih Team (Jika Anda belum membuat Team, konfigurasikan di Apple Developer Account).
5. Masukkan ID Organisasi (misalnya, com.your-name)
6. Masukkan ID Paket (misalnya, com.your-name.MessagingExample, ID ini harus unik di antara semua aplikasi iOS).
7. Pilih Storyboard di menu pulldown Interface.
8. Pilih Delegasi Aplikasi UIKit di menu pulldown Siklus Proses.
9. Pilih Swift di Language.
10. Klik Berikutnya.

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

3. Mengonfigurasi APN

Membuat kunci autentikasi

Bagian ini menjelaskan cara membuat kunci autentikasi untuk App ID yang diaktifkan untuk Push Notifications. Jika sudah memiliki kunci, Anda dapat menggunakan kunci tersebut daripada membuat yang baru.

Untuk membuat kunci autentikasi:

1. Di akun developer, buka Certificates, Identifiers & Profil, lalu buka Kunci.

2. Klik tombol Add (+) di pojok kanan atas.

3. Masukkan deskripsi untuk APNs Auth Key
4. Di bagian Key Services, centang kotak APN, lalu klik Continue.

5. Klik Register, lalu Download. Simpan kunci Anda di tempat yang aman. Download ini hanya dapat dilakukan satu kali, dan kuncinya tidak dapat diambil nanti.

Membuat App ID

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

1. Buka Apple Developer Member Center dan login.
2. Buka Certificates, Identifiers and Profiles.
3. Buka ID.
4. Klik tombol + untuk membuat ID Aplikasi baru.
5. Pilih tombol pilihan App IDs, lalu klik Continue.

6. Pilih Aplikasi, lalu klik Lanjutkan.

7. Untuk membuat App ID baru:
8. Masukkan Nama untuk ID Aplikasi Anda.
9. Masukkan Team ID. Nilai ini harus sesuai dengan Team ID di tab Membership.
10. Di bagian App ID Suffix, pilih Opsi ID Eksplisit, lalu masukkan Bundle ID Anda.
11. Di bagian App Services, pastikan Push Notifications dicentang.
12. Klik Continue dan pastikan input Anda sudah benar:
13. Nilai Identifier harus cocok dengan rangkaian nilai Team ID dan Bundle ID
14. Push Notifications harus Configurable
15. Klik Register untuk membuat ID Aplikasi.

Membuat Profil

Untuk menguji aplikasi saat dalam pengembangan, Anda memerlukan Profil pengembangan untuk mengizinkan perangkat menjalankan aplikasi yang belum dipublikasikan di App Store.

1. Buka Apple Developer Member Center dan login.
2. Buka Certificates, Identifiers and 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.
5. Pilih iOS App Development sebagai jenis profil penyediaan, lalu klik Continue.

6. Di menu drop-down, pilih ID Aplikasi yang ingin Anda gunakan, lalu klik Continue.
7. Pilih sertifikat iOS Development dari ID Aplikasi yang Anda pilih di langkah sebelumnya, lalu klik Continue.
8. Pilih perangkat iOS yang ingin Anda sertakan di Profil Penyediaan, lalu klik Continue. Pastikan untuk memilih semua perangkat yang ingin digunakan untuk pengujian.
9. Masukkan nama untuk profil penyediaan ini (misalnya, MessagingExampleProfile), lalu klik Generate.

10. Klik Download untuk menyimpan Profil Penyediaan ke Mac Anda.

11. Klik dua kali file Provisioning Profile untuk menginstalnya.

4. Menambahkan Firebase ke project iOS Anda

Membuat project Firebase

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

1. Di Firebase console, klik Add project, lalu pilih atau masukkan Project name.

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

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

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

Catatan: Setelah Firebase menyediakan resource untuk project Firebase, Anda tidak dapat mengubah project ID. Untuk menggunakan ID tertentu, Anda harus mengedit project ID selama langkah penyiapan ini.

3. Klik Lanjutkan.
4. Siapkan Google Analytics untuk project Anda agar Anda mendapatkan pengalaman optimal menggunakan salah satu 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, lalu setujui setelan berbagi data dan persyaratan Google Analytics untuk project Anda.

5. Klik Create project (atau Add Firebase, jika Anda menggunakan project GCP yang sudah ada).

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

Mendaftarkan aplikasi ke Firebase

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

Buka bagian Memahami Project Firebase untuk mempelajari lebih lanjut praktik terbaik dan pertimbangan untuk 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.

3. Masukkan ID paket aplikasi Anda di kolom iOS bundle ID.
4. (Opsional) Masukkan informasi lain aplikasi: App nickname dan App Store ID.
5. Klik Daftarkan aplikasi.

Menambahkan file konfigurasi Firebase

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

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-nya sendiri.

Tutup XCode.

Menambahkan Firebase SDK ke aplikasi

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 belum memilikinya. Jika Anda menggunakan contoh panduan memulai, project Xcode dan Podfile (dengan pod) sudah ada.

$ cd MessagingExample
$ pod init

2. Tambahkan pod Firebase yang ingin digunakan di aplikasi Anda ke Podfile Anda.

Anda dapat menambahkan produk Firebase yang didukung ke aplikasi iOS.

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

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

# Add the pod for Firebase Cloud Messaging
pod 'Firebase/Messaging'

3. Instal pod, lalu buka file .xcworkspace untuk melihat project di Xcode:

$ pod install

4. Buka MessagingExample.xcworkspace, lalu klik Next di Firebase console.

Melakukan inisialisasi Firebase di aplikasi

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

2. Konfigurasikan instance bersama FirebaseApp yang 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
}

3. Klik Next di Firebase console.
4. Firebase SDK ditambahkan ke aplikasi Anda. Klik Lanjutkan ke konsol.

5. Mengonfigurasi klien FCM

Mengupload kunci autentikasi APN

Upload kunci autentikasi APN Anda ke Firebase.

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

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-baris ini di akhir Tailwind.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 dirinya sendiri (Dalam contoh panduan memulai, ini 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-baris ini di akhir Tailwind.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 menambahkan kemampuan Push Notifications di bagian Create an App ID, tetapi Anda juga harus menambahkan kemampuan ini pada XCode dengan langkah-langkah berikut (langkah-langkah di bawah ini ada di XCode 12.3):

1. Klik nama project di Navigator Area.
2. Klik Penandatanganan & Kapabilitas.
3. Klik + Capability.

4. Klik dua kali Background Modes.
5. Klik + Capability lagi.
6. Klik dua kali Push Notifications.
7. Periksa Remote notifications di bagian Background Modes.

6. Kirim pesan notifikasi

Anda dapat mengirim pesan pengujian dengan langkah-langkah berikut:

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

3. Pastikan aplikasi berada di latar belakang pada perangkat.
4. Buka Notifications Composer, lalu pilih New Notification.
5. Masukkan teks pesan.
6. Pilih Kirim pesan pengujian.
7. Dalam kolom yang berlabel Add an FCM Registration token, masukkan token pendaftaran yang diperoleh di langkah 2.
8. Klik Uji.

Setelah mengklik Test, 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.

7. Selamat

Selamat, Anda berhasil mengirim pesan percobaan.

Terdapat banyak fungsi dan konfigurasi lainnya di FCM, seperti langganan topik.

Lihat dokumen developer resmi jika Anda tertarik.

Apa selanjutnya?

Lihat beberapa codelab ini.

• Android Lanjutan di Kotlin 01.2:Android Firebase Cloud Messaging

Bacaan lebih lanjut

• Dokumen resmi Firebase Cloud Messaging