Rich Notification: ano ito, nilalaman ng media at paggawa ng mga notification

Ano ang Rich Notification

Rich Notification ay isang iOS push notification na hindi lamang naglalaman ng text, kundi pati na rin ng mga media attachment, interactive na elemento at naka-customize na interface. Ang terminong “rich” (mayaman) ay sumasalamin sa kakayahang isama ang mga imahe, video, audio, action button at text input sa notification, na ginagawang ganap na interactive na elemento ang simpleng alerto.

Ebolusyon ng mga notification sa iOS

Ipinakilala ng Apple ang suporta para sa Rich Notification sa iOS 10 kasama ng UserNotifications framework. Bago ito, ang mga push notification ay maaari lamang maglaman ng text, tunog at badge. iOS 10 ay nagpakilala ng UNNotificationServiceExtension at UNNotificationContentExtension, na nagbukas ng posibilidad ng pagbabago ng content at paglikha ng mga custom na interface. Sa mga susunod na bersyon, idinagdag ang suporta para sa SwiftUI sa Content Extension, mga animated na GIF at pinahusay na pag-scale ng media.

Mga kalamangan kumpara sa mga standard notification

Malaki ang pagtaas ng pakikipag-ugnayan ng user sa Rich Notification. Ipinapakita ng pananaliksik ng Apple na ang mga notification na may mga imahe ay tumatanggap ng 30–40% na mas maraming interaksyon kumpara sa mga text notification. Ang imahe ng produkto, preview ng video o button para sa mabilis na tugon ay nagpapahintulot sa user na gumawa ng desisyon nang direkta mula sa notification nang hindi binubuksan ang app. Pinaiikli nito ang daan patungo sa target na aksyon at pinapabuti ang karanasan ng user.

Mga uri ng media attachment at ang kanilang mga format

UNNotificationAttachment ay sumusuporta sa tatlong kategorya ng media: mga imahe, video at audio. Bawat uri ay may sariling mga limitasyon sa format, laki at tagal. Awtomatikong ini-scale ng system ang mga imahe sa laki ng notification at nililimitahan ang tagal ng video sa 30 segundo para sa pag-optimize ng pagganap.

Mga imahe at animated na GIF

Ang mga imahe ay awtomatikong pinuputol at ini-scale ng system para sa pagpapakita sa compact at pinalawak na view ng notification. Animated na GIF ay sinusuportahan simula iOS 12 at awtomatikong nagpe-play kapag tiningnan ang notification. Ang inirerekomendang laki ng imahe ay 1024x1024 pixels, na nagsisiguro ng malinaw na pagpapakita sa lahat ng device, kabilang ang iPad na may malaking screen.

Video at audio attachment

Ang video sa Rich Notification ay nagpe-play nang walang tunog bilang default — maaaring i-on ng user ang tunog sa pamamagitan ng button sa player. Maximum na tagal ng video ay 30 segundo, pagkatapos nito ay hihinto ang pag-play. Ang mga audio attachment ay maaaring gamitin para sa mga voice message o sound preview at nagpe-play kapag na-tap ang notification sa pinalawak na view.

Mga interactive na button at aksyon

Interactive na aksyon ay nagpapahintulot sa user na magsagawa ng mga operasyon nang direkta mula sa notification nang hindi binubuksan ang app. Ang mga aksyon ay nirerehistro sa pamamagitan ng UNNotificationCategory at UNNotificationAction kapag sinimulan ang app. Bawat aksyon ay maaaring background (nang hindi binubuksan ang app) o foreground (binubuksan ang app para kumpletuhin ang operasyon).

UNNotificationAction at UNTextInputNotificationAction

Ang UNNotificationAction ay isang button na may pamagat at opsyonal na modifiers, tulad ng requiresAuthentication (nangangailangan ng Face ID/Touch ID) o destructive (naka-highlight sa pula). UNTextInputNotificationAction ay nagpapalawak ng kakayahang ito sa pamamagitan ng pagdaragdag ng text input field — perpekto para sa mabilis na tugon sa mensahe o komento. Ang mga aksyon ay ipinapakita sa matagal na pagpindot ng notification o pag-swipe pababa.

Pagrehistro ng mga kategorya at aksyon

Ang mga kategorya ng notification ay nag-uugnay ng uri ng content sa set ng mga available na aksyon. Ang proseso ng pagrehistro ay ginagawa sa AppDelegate kapag sinimulan ang app sa pamamagitan ng UNUserNotificationCenter.current().setNotificationCategories. Ang kategorya ay tinutukoy sa server sa field na category ng JSON payload, at awtomatikong inilalapat ng system ang kaukulang set ng mga aksyon sa notification.

Paghawak ng mga pag-click sa aksyon

Kapag nag-click ang user ng button o nagpadala ng text, tinatawagan ng system ang delegate na UNUserNotificationCenterDelegate na may method na didReceive response. UNNotificationResponse ay naglalaman ng identifier ng aksyon at ang text na ipinasok (para sa UNTextInputNotificationAction). Batay sa impormasyong ito, isinasagawa ng app ang kaukulang business logic: nagpapadala ng mensahe, nagkukumpirma ng aksyon o nagbubukas ng partikular na screen.

Pagpapatupad ng Rich Notification sa Swift

Tingnan natin ang kumpletong cycle ng paggawa ng Rich Notification: mula sa pagrehistro ng mga kategorya sa AppDelegate hanggang sa pagproseso sa Service Extension at pagpapakita. AppDelegate ay nagrerehistro ng kategorya na may mga button, ang server ay nagpapadala ng notification na may URL ng imahe, ang Service Extension ay nagda-download ng media, at ang Content Extension ay nagpapakita ng custom na interface na may mga button.

// AppDelegate — pagpaparehistro ng mga kategorya at aksyon
func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions:
    [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {

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

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

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

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

Service Extension para sa pag-download ng imahe

Pagkatapos makatanggap ng push notification na may kategoryang “social_post” at URL ng imahe sa custom na field, ang Service Extension ay na-activate. Ang extension ay nagda-download ng imahe sa pamamagitan ng network, lumilikha ng UNNotificationAttachment na may natatanging identifier at idinadagdag ito sa content. Mahalagang suriin ang laki ng na-download na file — kung lumampas ito sa 10 MB, hindi malilikha ang attachment at ipapakita ng system ang notification nang walang 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()
    }
}

Pag-test ng Rich Notification

Para sa pag-test ng Rich Notification nang walang server, gamitin ang iOS simulator at magpadala ng push sa pamamagitan ng terminal gamit ang xcrun simctl push. Sa payload, dapat tukuyin ang mutable-content: 1 para i-activate ang Service Extension at category para sa pagpapakita ng mga aksyon. Ang command ay nagpapadala ng push mula sa isang JSON file nang direkta sa napiling simulator, na nagbibigay-daan sa mabilis na iteration nang hindi nagse-set up ng server infrastructure.

Content Extension at custom na interface

UNNotificationContentExtension ay nagpapahintulot na ganap na palitan ang standard interface ng notification ng isang arbitrary na UIKit o SwiftUI view. Ang extension ay na-activate kapag pinalawak ng user ang notification (force touch o pag-swipe pababa) at maaaring maglaman ng mga button, slider, animation at iba pang UI component. Ang laki ng interface ay umaangkop sa content gamit ang Auto Layout.

Storyboard at SwiftUI sa Content Extension

Ang Content Extension ay batay sa storyboard na may view na nagmamana ng UIViewController. SwiftUI View ay isinasama sa pamamagitan ng UIHostingController simula iOS 16, na nagpapahintulot sa paggamit ng modernong approach sa pagbuo ng interface. Para sa backward compatibility sa iOS 14–15, inirerekomenda ang paggamit ng UIKit na may mga xib file. Ang interface ay tumatanggap ng binagong content mula sa Service Extension sa pamamagitan ng UNNotificationContent.

Paghawak ng mga aksyon ng user

Ang Content Extension ay nagpapatupad ng protocol na UNNotificationContentExtension na may method na didReceive response. UNNotificationResponse ay naglalaman ng impormasyon tungkol sa pinindot na button o text na ipinasok. Maaaring i-update ng extension ang interface nang hindi isinasara ang notification o tumawag ng completion handler para isara ito. Ito ay nagpapahintulot sa paglikha ng mabilis na interaction scenario, tulad ng “like” na may visual feedback nang direkta sa notification.

Mga rekomendasyon sa disenyo

Inirerekomenda ng Apple na ang Content Extension ay maging concise at functional, iwasan ang mga labis na elemento. Maximum na taas ng pinalawak na notification ay humigit-kumulang 400 puntos, pagkatapos nito ay nag-scroll ang content. Gamitin ang system fonts at spacing para sa pagkakapareho sa ibang notification. Mag-test sa iba’t ibang laki ng screen upang matiyak na ang interface ay tama na ipinapakita sa parehong iPhone at iPad.