Rich Notification: apa itu, konten media dan pembuatan notifikasi

Apa itu Rich Notification

Rich Notification adalah notifikasi push iOS yang tidak hanya berisi teks, tetapi juga lampiran media, elemen interaktif, dan antarmuka yang dikustomisasi. Istilah “rich” (kaya) mencerminkan kemampuan untuk menyertakan gambar, video, audio, tombol tindakan, dan input teks dalam notifikasi, mengubah pemberitahuan sederhana menjadi elemen interaktif yang lengkap.

Evolusi notifikasi di iOS

Apple memperkenalkan dukungan Rich Notification di iOS 10 bersama dengan framework UserNotifications. Sebelumnya, notifikasi push hanya dapat berisi teks, suara, dan badge. iOS 10 memperkenalkan UNNotificationServiceExtension dan UNNotificationContentExtension, yang membuka kemungkinan modifikasi konten dan pembuatan antarmuka kustom. Di versi selanjutnya, ditambahkan dukungan untuk SwiftUI di Content Extension, GIF animasi, dan penskalaan media yang lebih baik.

Keunggulan dibandingkan notifikasi standar

Rich Notification secara signifikan meningkatkan keterlibatan pengguna. Penelitian Apple menunjukkan bahwa notifikasi dengan gambar menerima 30–40% lebih banyak interaksi dibandingkan dengan yang hanya teks. Gambar produk, pratinjau video, atau tombol respons cepat memungkinkan pengguna mengambil keputusan langsung dari notifikasi tanpa membuka aplikasi. Ini mempersingkat jalur menuju tindakan yang dituju dan meningkatkan pengalaman pengguna.

Jenis lampiran media dan formatnya

UNNotificationAttachment mendukung tiga kategori media: gambar, video, dan audio. Setiap jenis memiliki batasan sendiri dalam hal format, ukuran, dan durasi. Sistem secara otomatis menskalakan gambar ke ukuran notifikasi dan membatasi durasi video hingga 30 detik untuk optimasi kinerja.

Gambar dan GIF animasi

Gambar secara otomatis dipotong dan diskalakan oleh sistem untuk ditampilkan dalam tampilan notifikasi yang ringkas dan diperluas. GIF animasi didukung mulai iOS 12 dan diputar secara otomatis saat melihat notifikasi. Ukuran gambar yang direkomendasikan adalah 1024x1024 piksel, yang memastikan tampilan jelas di semua perangkat, termasuk iPad dengan layar besar.

Lampiran video dan audio

Video di Rich Notification diputar tanpa suara secara default — pengguna dapat mengaktifkan suara melalui tombol di pemutar. Durasi video maksimum adalah 30 detik, setelah itu pemutaran berhenti. Lampiran audio dapat digunakan untuk pesan suara atau pratinjau audio dan diputar saat mengetuk notifikasi dalam tampilan yang diperluas.

Tombol interaktif dan tindakan

Tindakan interaktif memungkinkan pengguna melakukan operasi langsung dari notifikasi tanpa membuka aplikasi. Tindakan didaftarkan melalui UNNotificationCategory dan UNNotificationAction saat aplikasi dimulai. Setiap tindakan dapat bersifat latar belakang (tanpa membuka aplikasi) atau latar depan (membuka aplikasi untuk menyelesaikan operasi).

UNNotificationAction dan UNTextInputNotificationAction

UNNotificationAction adalah tombol dengan judul dan pengubah opsional, seperti requiresAuthentication (memerlukan Face ID/Touch ID) atau destructive (disorot dengan warna merah). UNTextInputNotificationAction memperluas kemampuan ini dengan menambahkan bidang input teks — ideal untuk respons cepat terhadap pesan atau komentar. Tindakan ditampilkan saat menekan lama notifikasi atau menggeser ke bawah.

Pendaftaran kategori dan tindakan

Kategori notifikasi menghubungkan jenis konten dengan kumpulan tindakan yang tersedia. Proses pendaftaran dilakukan di AppDelegate saat aplikasi dimulai melalui UNUserNotificationCenter.current().setNotificationCategories. Kategori ditentukan di server di bidang category payload JSON, dan sistem secara otomatis menerapkan kumpulan tindakan yang sesuai ke notifikasi.

Penanganan klik pada tindakan

Ketika pengguna mengklik tombol atau mengirim teks, sistem memanggil delegat UNUserNotificationCenterDelegate dengan metode didReceive response. UNNotificationResponse berisi pengidentifikasi tindakan dan teks yang dimasukkan (untuk UNTextInputNotificationAction). Berdasarkan informasi ini, aplikasi menjalankan logika bisnis yang sesuai: mengirim pesan, mengonfirmasi tindakan, atau membuka layar tertentu.

Implementasi Rich Notification di Swift

Mari kita lihat siklus lengkap pembuatan Rich Notification: dari pendaftaran kategori di AppDelegate hingga pemrosesan di Service Extension dan penampilan. AppDelegate mendaftarkan kategori dengan tombol, server mengirim notifikasi dengan URL gambar, Service Extension mengunduh media, dan Content Extension menampilkan antarmuka kustom dengan tombol.

// AppDelegate — pendaftaran kategori dan tindakan
func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions:
    [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {

    let replyAction = UNTextInputNotificationAction(
        identifier: "reply",
        title: "Balas",
        options: [.authenticationRequired])

    let likeAction = UNNotificationAction(
        identifier: "like",
        title: "Suka",
        options: [])

    let category = UNNotificationCategory(
        identifier: "social_post",
        actions: [replyAction, likeAction],
        intentIdentifiers: [],
        options: [])

    UNUserNotificationCenter.current()
        .setNotificationCategories([category])
    return true
}

Service Extension untuk mengunduh gambar

Setelah menerima notifikasi push dengan kategori “social_post” dan URL gambar di bidang kustom, Service Extension diaktifkan. Ekstensi mengunduh gambar melalui jaringan, membuat UNNotificationAttachment dengan pengidentifikasi unik, dan menambahkannya ke konten. Penting untuk memeriksa ukuran file yang diunduh — jika melebihi 10 MB, attachment tidak akan dibuat, dan sistem akan menampilkan notifikasi tanpa media.

class NotificationService: UNNotificationServiceExtension {

    override func didReceive(
        _ request: UNNotificationRequest,
        withContentHandler contentHandler:
        @escaping (UNNotificationContent) -> Void
    ) {
        let content = (request.content.mutableCopy()
            as! UNMutableNotificationContent)
        guard let urlString = content.userInfo["media-url"]
            as? String,
            let url = URL(string: urlString)
        else { contentHandler(request.content); return }

        URLSession.shared.downloadTask(with: url) {
            location, _, _ in
            guard let location = location else {
                contentHandler(content); return }
            let attachment = try! UNNotificationAttachment(
                identifier: "media", url: location,
                options: [UNNotificationAttachmentOptionsTypeHintKey:
                    "jpg"])
            content.attachments = [attachment]
            contentHandler(content)
        }.resume()
    }
}

Pengujian Rich Notification

Untuk menguji Rich Notification tanpa server, gunakan simulator iOS dan kirim push melalui terminal dengan xcrun simctl push. Di payload, tentukan wajib mutable-content: 1 untuk mengaktifkan Service Extension dan category untuk menampilkan tindakan. Perintah mengirim push dari file JSON langsung ke simulator yang dipilih, memungkinkan iterasi cepat tanpa menyiapkan infrastruktur server.

Content Extension dan antarmuka kustom

UNNotificationContentExtension memungkinkan penggantian lengkap antarmuka notifikasi standar dengan tampilan UIKit atau SwiftUI kustom. Ekstensi diaktifkan ketika pengguna memperluas notifikasi (force touch atau geser ke bawah) dan dapat berisi tombol, penggeser, animasi, dan komponen UI lainnya. Ukuran antarmuka menyesuaikan dengan konten menggunakan Auto Layout.

Storyboard dan SwiftUI di Content Extension

Content Extension didasarkan pada storyboard dengan tampilan yang mewarisi UIViewController. SwiftUI View diintegrasikan melalui UIHostingController mulai iOS 16, memungkinkan penggunaan pendekatan modern untuk membangun antarmuka. Untuk kompatibilitas mundur dengan iOS 14–15, disarankan menggunakan UIKit dengan file xib. Antarmuka menerima konten yang dimodifikasi dari Service Extension melalui UNNotificationContent.

Penanganan tindakan pengguna

Content Extension mengimplementasikan protokol UNNotificationContentExtension dengan metode didReceive response. UNNotificationResponse berisi informasi tentang tombol yang ditekan atau teks yang dimasukkan. Ekstensi dapat memperbarui antarmuka tanpa menutup notifikasi atau memanggil completion handler untuk menutupnya. Ini memungkinkan pembuatan skenario interaksi cepat, seperti “suka” dengan umpan balik visual langsung di notifikasi.

Rekomendasi desain

Apple merekomendasikan agar Content Extension ringkas dan fungsional, menghindari elemen yang berlebihan. Tinggi maksimum notifikasi yang diperluas sekitar 400 titik, setelah itu konten dapat digulir. Gunakan font dan spasi sistem untuk keseragaman dengan notifikasi lainnya. Uji pada berbagai ukuran layar untuk memastikan antarmuka ditampilkan dengan benar baik di iPhone maupun iPad.