การปรับแต่ง Push Notification ของ iOS

เมื่ออุปกรณ์ iOS ได้รับการแจ้งเตือนที่มีการแจ้งเตือน (alert) ระบบจะแสดงเนื้อหาของการแจ้งเตือนในสองขั้นตอน ในตอนแรก ระบบจะแสดงแบนเนอร์แบบย่อพร้อมหัวข้อ (title), หัวข้อย่อย (subtitle) และข้อความเนื้อหา (body text) สองถึงสี่บรรทัดจากการแจ้งเตือน หากผู้ใช้กดที่แบนเนอร์แบบย่อ iOS จะแสดงอินเทอร์เฟซการแจ้งเตือนแบบเต็ม รวมถึงการดำเนินการใดๆ ที่เกี่ยวข้องกับการแจ้งเตือน ระบบจะจัดเตรียมอินเทอร์เฟซสำหรับแบนเนอร์แบบย่อ แต่คุณสามารถปรับแต่งอินเทอร์เฟซแบบเต็มได้โดยใช้ส่วนขยายแอปสำหรับเนื้อหาการแจ้งเตือน (notification content app extension)

ส่วนขยายแอปสำหรับเนื้อหาการแจ้งเตือนจะจัดการ view controller ที่แสดงอินเทอร์เฟซการแจ้งเตือนที่คุณกำหนดเอง view controller นี้สามารถเสริมหรือแทนที่อินเทอร์เฟซระบบเริ่มต้นสำหรับการแจ้งเตือนของคุณได้ คุณสามารถใช้ view controller ของคุณเพื่อ:

• ปรับแต่งการจัดวางองค์ประกอบต่างๆ รวมถึงหัวข้อ, หัวข้อย่อย และเนื้อหาของการแจ้งเตือน
• แทนที่ฟอนต์หรือสไตล์ที่แตกต่างกันสำหรับองค์ประกอบอินเทอร์เฟซ
• แสดงข้อมูลเฉพาะของแอป—ตัวอย่างเช่น ข้อมูลที่จัดเก็บในคีย์เฉพาะของแอปใน payload ของการแจ้งเตือน
• ใส่รูปภาพหรือแบรนด์ที่กำหนดเอง

ส่วนขยายแอปของคุณต้องกำหนดค่า view controller โดยใช้ข้อมูลที่พร้อมใช้งานได้ทันที เช่น เนื้อหาของการแจ้งเตือนและไฟล์ที่มีอยู่ใน bundle ของส่วนขยายแอปของคุณ หากคุณใช้ app group เพื่อแชร์ข้อมูลระหว่างแอปและส่วนขยายแอปของคุณ คุณยังสามารถใช้ไฟล์ใดๆ ที่พบใน app group ได้ เพื่อให้แน่ใจว่าการแจ้งเตือนของคุณจะถูกส่งอย่างทันท่วงที ให้กำหนดค่า view ต่างๆ ให้เร็วที่สุดเท่าที่จะทำได้ อย่าทำงานที่ใช้เวลานาน เช่น การพยายามดึงข้อมูลผ่านเครือข่าย

เพื่อเพิ่มส่วนขยายแอปสำหรับเนื้อหาการแจ้งเตือนในแอป iOS ของคุณ:

1. เลือก File > New > Target ใน Xcode
2. เลือก Notification Content Extension จาก iOS Application Extension
3. คลิก Next
4. ระบุ name สำหรับส่วนขยายแอปของคุณ
5. คลิก Finish

เทมเพลตที่ Xcode ให้มานั้นมี storyboard และ view controller ให้คุณกำหนดค่า สร้างอินเทอร์เฟซการแจ้งเตือนที่คุณกำหนดเองโดยการเพิ่ม view ต่างๆ เข้าไปใน view controller ของคุณ ตัวอย่างเช่น ใช้ label เพื่อแสดงหัวข้อ หัวข้อย่อย และเนื้อหาของการแจ้งเตือน คุณยังสามารถเพิ่ม image view และ view ที่แสดงเนื้อหาที่ไม่สามารถโต้ตอบได้ คุณไม่จำเป็นต้องระบุเนื้อหาเริ่มต้นใดๆ สำหรับ view ของคุณ

คุณสามารถเพิ่มส่วนควบคุมแบบโต้ตอบ (interactive controls) (เช่น ปุ่มหรือสวิตช์) ได้ใน iOS 12 และใหม่กว่า สำหรับข้อมูลเพิ่มเติม โปรดดูที่ Support Interactive Controls

ใช้เมธอด didReceive(_:) ของ view controller ของคุณเพื่ออัปเดต label และ view อื่นๆ payload ของการแจ้งเตือนจะมีข้อมูลสำหรับใช้ในการกำหนดค่า view controller ของคุณ คุณยังสามารถใช้ข้อมูลจากไฟล์อื่นๆ ของส่วนขยายแอปของคุณได้ รายการที่ 1 แสดงเวอร์ชันของเมธอดนี้ที่ดึงข้อมูลหัวข้อและเนื้อหาจาก payload ของการแจ้งเตือนและกำหนดสตริงให้กับคอนโทรล UILabel สองตัว ซึ่งจัดเก็บเป็น outlet บน view controller

// Configuring the notification interface at runtime

func didReceive(_ notification: UNNotification) {
   self.bodyText?.text = notification.request.content.body
   self.headlineText?.text = notification.request.content.title
}

หากมีการแจ้งเตือนครั้งที่สองมาถึงในขณะที่ view controller ของคุณปรากฏอยู่แล้ว ระบบจะเรียกเมธอด didReceive(_:) อีกครั้งพร้อมกับ payload การแจ้งเตือนใหม่

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

เพื่อเปิดใช้งานการโต้ตอบของผู้ใช้:

1. เปิดไฟล์ info.plist ของ Notification Content Extension ของคุณ
2. เพิ่มคีย์ UNNotificationExtensionUserInteractionEnabled ไปยัง extension attributes ของคุณ กำหนดค่าเป็น Boolean โดยตั้งค่าเป็น YES

import UIKit
import Foundation
import UserNotifications
import UserNotificationsUI
import PassKit

class NotificationViewController: UIViewController, UNNotificationContentExtension, PKPaymentAuthorizationViewControllerDelegate {


    func paymentAuthorizationViewControllerDidFinish(_ controller: PKPaymentAuthorizationViewController) {
        controller.dismiss(animated: true, completion: nil)
    }


    @IBOutlet weak var buyWithApplePayButton: UIButton!
    @IBOutlet weak var containerView: UIView!
    @IBOutlet weak var payInAppButton: UIButton!
    @IBOutlet weak var segmentCustom: UISegmentedControl!

    private var amount: NSDecimalNumber = 0;

    override func viewDidLoad() {
        super.viewDidLoad()

        buttonCustomisation()

        amount = NSDecimalNumber.init(value: 5)
    }

    func buttonCustomisation () {
        self.buyWithApplePayButton.layer.masksToBounds = true
        self.buyWithApplePayButton.layer.cornerRadius = 10
        self.payInAppButton.layer.masksToBounds = true
        self.payInAppButton.layer.cornerRadius = 10
        self.containerView.layer.borderColor = UIColor.gray.cgColor
        self.containerView.layer.borderWidth = 0.7
        self.containerView.layer.masksToBounds = true
        self.containerView.layer.cornerRadius = 20
    }

    func didReceive(_ notification: UNNotification) {
        // Configuring the notification interface at runtime
    }

    @IBAction func buyWithApplePayAction(_ sender: Any) {
        let request = PKPaymentRequest()
        request.merchantIdentifier = "merchant.com.sample.ApplePayAction"
        request.supportedNetworks = [PKPaymentNetwork.visa, PKPaymentNetwork.masterCard, PKPaymentNetwork.amex]
        request.merchantCapabilities = PKMerchantCapability.capability3DS
        request.countryCode = "US"
        request.currencyCode = "USD"

        request.paymentSummaryItems = [
            PKPaymentSummaryItem(label: "Some Product", amount: amount)
        ]

        let applePayController = PKPaymentAuthorizationViewController(paymentRequest: request)
        applePayController?.delegate = self
        self.present(applePayController!, animated: true, completion: nil)
    }

    @IBAction func payInAppButtonAction(_ sender: Any) {
        print("pay in app button tapped")
    }

    @IBAction func segmentAction(_ sender: Any) {
        switch segmentCustom.selectedSegmentIndex {
        case 0:
            amount = NSDecimalNumber.init(value: 5)
            break
        case 1:
            amount = NSDecimalNumber.init(value: 10)
            break
        case 2:
            amount = NSDecimalNumber.init(value: 20)
            break
        default:
            amount = NSDecimalNumber.init(value: 5)
            break
        }
    }
}