Rich Notification: คืออะไร เนื้อหาสื่อและการสร้างการแจ้งเตือน

Rich Notification คืออะไร

Rich Notification คือการแจ้งเตือนแบบพุชของ iOS ที่ไม่เพียงมีข้อความเท่านั้น แต่ยังมีสื่อแนบ องค์ประกอบแบบโต้ตอบและอินเทอร์เฟซที่ปรับแต่งได้ คำว่า “rich” สะท้อนถึงความสามารถในการรวมรูปภาพ วิดีโอ เสียง ปุ่มดำเนินการและการป้อนข้อความในการแจ้งเตือน เปลี่ยนการแจ้งเตือนแบบง่ายให้เป็นองค์ประกอบแบบโต้ตอบอย่างสมบูรณ์

วิวัฒนาการของการแจ้งเตือนใน iOS

Apple เปิดตัวการสนับสนุน Rich Notification ใน iOS 10 พร้อมกับเฟรมเวิร์ก UserNotifications ก่อนหน้านี้ การแจ้งเตือนแบบพุชสามารถมีได้เพียงข้อความ เสียงและตรา iOS 10 นำเสนอ UNNotificationServiceExtension และ UNNotificationContentExtension ซึ่งเปิดความสามารถในการปรับเปลี่ยนเนื้อหาและสร้างอินเทอร์เฟซที่กำหนดเอง เวอร์ชันต่อมาเพิ่มการสนับสนุน SwiftUI ใน Content Extension GIF ภาพเคลื่อนไหวและการปรับขนาดสื่อที่ดีขึ้น

ข้อดีเหนือการแจ้งเตือนมาตรฐาน

Rich Notification ช่วยเพิ่มการมีส่วนร่วมของผู้ใช้อย่างมาก การศึกษาของ Apple แสดงให้เห็นว่าการแจ้งเตือนที่มีรูปภาพได้รับ การโต้ตอบมากกว่า 30–40% เมื่อเทียบกับการแจ้งเตือนที่มีเฉพาะข้อความ รูปภาพสินค้า ตัวอย่างวิดีโอหรือปุ่มตอบกลับด่วนช่วยให้ผู้ใช้ตัดสินใจได้โดยตรงจากการแจ้งเตือนโดยไม่ต้องเปิดแอป ซึ่งช่วยลดเส้นทางไปสู่การดำเนินการเป้าหมายและปรับปรุงประสบการณ์ผู้ใช้

ประเภทของสื่อแนบและรูปแบบ

UNNotificationAttachment รองรับสื่อสามประเภท: รูปภาพ วิดีโอและเสียง แต่ละประเภทมีข้อจำกัดด้านรูปแบบ ขนาดและระยะเวลาของตัวเอง ระบบปรับขนาดรูปภาพโดยอัตโนมัติให้พอดีกับขนาดการแจ้งเตือนและจำกัดระยะเวลาวิดีโอไว้ที่ 30 วินาทีเพื่อประสิทธิภาพสูงสุด

รูปภาพและ GIF ภาพเคลื่อนไหว

รูปภาพถูกครอบและปรับขนาดโดยอัตโนมัติโดยระบบเพื่อแสดงในมุมมองการแจ้งเตือนแบบกะทัดรัดและขยาย GIF ภาพเคลื่อนไหว รองรับตั้งแต่ iOS 12 และเล่นโดยอัตโนมัติเมื่อดูการแจ้งเตือน ขนาดรูปภาพที่แนะนำคือ 1024x1024 พิกเซล ซึ่งรับประกันการแสดงผลที่คมชัดบนอุปกรณ์ทั้งหมด รวมถึง iPad ที่มีหน้าจอขนาดใหญ่

ไฟล์แนบวิดีโอและเสียง

วิดีโอใน Rich Notification เล่นโดยไม่มีเสียงตามค่าเริ่มต้น — ผู้ใช้สามารถเปิดเสียงผ่านปุ่มเล่น ระยะเวลาวิดีโอสูงสุด คือ 30 วินาที หลังจากนั้นการเล่นจะหยุดลง ไฟล์แนบเสียงสามารถใช้สำหรับข้อความเสียงหรือตัวอย่างเสียงและเล่นเมื่อแตะการแจ้งเตือนในมุมมองแบบขยาย

ปุ่มแบบโต้ตอบและการดำเนินการ

การดำเนินการแบบโต้ตอบ ช่วยให้ผู้ใช้ดำเนินการต่าง ๆ โดยตรงจากการแจ้งเตือนโดยไม่ต้องเปิดแอป การดำเนินการจะถูกลงทะเบียนผ่าน UNNotificationCategory และ UNNotificationAction เมื่อเริ่มต้นแอป แต่ละการดำเนินการสามารถเป็นพื้นหลัง (โดยไม่ต้องเปิดแอป) หรือเบื้องหน้า (เปิดแอปเพื่อดำเนินการให้เสร็จสมบูรณ์)

UNNotificationAction และ UNTextInputNotificationAction

UNNotificationAction แสดงถึงปุ่มที่มีชื่อเรื่องและตัวปรับแต่งเพิ่มเติมเช่น requiresAuthentication (ต้องใช้ Face ID/Touch ID) หรือ destructive (เน้นด้วยสีแดง) UNTextInputNotificationAction ขยายความสามารถนี้โดยเพิ่มฟิลด์ป้อนข้อความ — เหมาะสำหรับการตอบกลับข้อความหรือความคิดเห็นอย่างรวดเร็ว การดำเนินการจะแสดงเมื่อกดค้างที่การแจ้งเตือนหรือปัดลง

การลงทะเบียนหมวดหมู่และการดำเนินการ

หมวดหมู่การแจ้งเตือนเชื่อมโยงประเภทเนื้อหากับชุดการดำเนินการที่มี กระบวนการลงทะเบียน ดำเนินการใน AppDelegate เมื่อเริ่มต้นแอปผ่าน UNUserNotificationCenter.current().setNotificationCategories หมวดหมู่ถูกระบุบนเซิร์ฟเวอร์ในฟิลด์ category ของ JSON เพย์โหลดและระบบจะใช้ชุดการดำเนินการที่เกี่ยวข้องกับการแจ้งเตือนโดยอัตโนมัติ

การจัดการการแตะการดำเนินการ

เมื่อผู้ใช้แตะปุ่มหรือส่งข้อความ ระบบจะเรียก UNUserNotificationCenterDelegate ด้วยเมธอด didReceive response UNNotificationResponse ประกอบด้วยตัวระบุการดำเนินการและข้อความที่ป้อน (สำหรับ UNTextInputNotificationAction) จากข้อมูลนี้ แอปจะดำเนินตรรกะทางธุรกิจที่เกี่ยวข้อง: ส่งข้อความ ยืนยันการดำเนินการหรือเปิดหน้าจอเฉพาะ

การใช้งาน Rich Notification ใน Swift

มาดูวงจรการสร้าง Rich Notification แบบสมบูรณ์: จากการลงทะเบียนหมวดหมู่ใน AppDelegate ไปจนถึงการประมวลผลใน Service Extension และการแสดงผล AppDelegate ลงทะเบียนหมวดหมู่พร้อมปุ่ม เซิร์ฟเวอร์ส่งการแจ้งเตือนพร้อม URL รูปภาพ Service Extension ดาวน์โหลดสื่อและ Content Extension แสดงอินเทอร์เฟซที่กำหนดเองพร้อมปุ่ม

// AppDelegate — การลงทะเบียนหมวดหมู่และการดำเนินการ
func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions:
    [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {

    let replyAction = UNTextInputNotificationAction(
        identifier: "reply",
        title: "ตอบกลับ",
        options: [.authenticationRequired])

    let likeAction = UNNotificationAction(
        identifier: "like",
        title: "ถูกใจ",
        options: [])

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

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

Service Extension สำหรับโหลดรูปภาพ

หลังจากได้รับการแจ้งเตือนแบบพุชด้วยหมวดหมู่ “social_post” และ URL รูปภาพในฟิลด์ที่กำหนดเอง Service Extension จะถูกเปิดใช้งาน ส่วนขยายดาวน์โหลดรูปภาพ จากเครือข่าย สร้าง UNNotificationAttachment พร้อมตัวระบุที่ไม่ซ้ำกันและเพิ่มลงในเนื้อหา สิ่งสำคัญคือต้องตรวจสอบขนาดของไฟล์ที่ดาวน์โหลด — หากเกิน 10 MB ไฟล์แนบจะไม่ถูกสร้างขึ้นและระบบจะแสดงการแจ้งเตือนโดยไม่มีสื่อ

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

การทดสอบ Rich Notification

เพื่อทดสอบ Rich Notification โดยไม่ต้องใช้เซิร์ฟเวอร์ ให้ใช้โปรแกรมจำลอง iOS และส่งการแจ้งเตือนแบบพุชผ่านเทอร์มินัลด้วย xcrun simctl push ในเพย์โหลด อย่าลืมระบุ mutable-content: 1 เพื่อเปิดใช้งาน Service Extension และหมวดหมู่เพื่อแสดงการดำเนินการ คำสั่งนี้เรียกใช้การแจ้งเตือนจากไฟล์ JSON ไปยังโปรแกรมจำลองที่เลือกโดยตรง ทำให้สามารถทำซ้ำได้อย่างรวดเร็วโดยไม่ต้องตั้งค่าโครงสร้างพื้นฐานของเซิร์ฟเวอร์

Content Extension และอินเทอร์เฟซที่กำหนดเอง

UNNotificationContentExtension ช่วยให้คุณแทนที่อินเทอร์เฟซการแจ้งเตือนมาตรฐานด้วยมุมมอง UIKit หรือ SwiftUI ที่กำหนดเองได้อย่างสมบูรณ์ ส่วนขยายจะเปิดใช้งานเมื่อผู้ใช้ขยายการแจ้งเตือน (force touch หรือปัดลง) และสามารถมีปุ่ม แถบเลื่อน แอนิเมชันและส่วนประกอบ UI อื่น ๆ ขนาดอินเทอร์เฟซปรับตามเนื้อหาโดยใช้ Auto Layout

Storyboard และ SwiftUI ใน Content Extension

Content Extension ใช้ storyboard พร้อมตัวควบคุมมุมมองที่สืบทอดจาก UIViewController SwiftUI View ถูกรวมผ่าน UIHostingController ตั้งแต่ iOS 16 ซึ่งช่วยให้ใช้แนวทางสมัยใหม่ในการสร้างอินเทอร์เฟซ สำหรับความเข้ากันได้ย้อนหลังกับ iOS 14–15 แนะนำให้ใช้ UIKit กับไฟล์ xib อินเทอร์เฟซได้รับเนื้อหาที่แก้ไขจาก Service Extension ผ่าน UNNotificationContent

การจัดการการดำเนินการของผู้ใช้

Content Extension ใช้โปรโตคอล UNNotificationContentExtension ด้วยเมธอด didReceive response UNNotificationResponse มีข้อมูลเกี่ยวกับปุ่มที่กดหรือข้อความที่ป้อน ส่วนขยายสามารถอัปเดตอินเทอร์เฟซโดยไม่ต้องปิดการแจ้งเตือนหรือเรียกตัวจัดการเสร็จสิ้นเพื่อปิด ซึ่งช่วยให้สร้างสถานการณ์การโต้ตอบอย่างรวดเร็ว เช่น “ถูกใจ” พร้อมคำติชมทางภาพโดยตรงในการแจ้งเตือน

คำแนะนำการออกแบบ

Apple แนะนำให้ Content Extension กระชับและใช้งานได้ดี หลีกเลี่ยงองค์ประกอบที่มากเกินไป ความสูงสูงสุดของการแจ้งเตือนแบบขยาย ประมาณ 400 จุด หลังจากนั้นเนื้อหาจะเลื่อน ใช้แบบอักษรและระยะห่างของระบบเพื่อความสอดคล้องกับการแจ้งเตือนอื่น ๆ ทดสอบบนขนาดหน้าจอต่าง ๆ เพื่อให้แน่ใจว่าอินเทอร์เฟซแสดงผลอย่างถูกต้องทั้งบน iPhone และ iPad