自行設計 Apple Watch 的推播通知畫面

在 Apple Watch 上，可以使用 SwiftUI 的 WKNotificationScene 來自訂推播通知的詳細畫面。

Apple Watch 推播通知概覽

在 Apple Watch 上的推播通知，如果我們沒特別處理，預設只有由「App 圖像、標題、副標題、內文」這幾項所組成的短短通知，不會有更多豐富的資訊呈現。

這裡圖中只使用了「App 圖像、標題、內文」，未使用到副標題。

自訂 Apple Watch 的推播通知畫面

如果我們想在推播通知提供更多的資訊，讓使用者有更好的體驗，就能自訂 Apple Watch 的推播通知畫面，取代預設的推播通知畫面。

呈現 Apple Watch 推播通知畫面的 WKNotificationScene

要自訂 Apple Watch 的推播通知畫面，第一步就是要在 App 底下新增一個 WKNotificationScene。

@main
struct Example: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        
        WKNotificationScene(controller: NotificationController.self, category: "newPost")
    }
}

WKNotificationScene 會需要兩個參數，第一個是用來處理接收推播通知的 Controller，第二個則是這個自訂推播通知的畫面是要用來呈現哪一種類型的推播通知。

這裡特別的是，因為 Apple Watch 在收到推播通知時，並沒有打開 App，但我們卻是在 App 底下寫我們自訂的推播通知 Scene，彷彿在接到推播通知時，就有在執行我們的 App 了。

推播通知的 apns 資料

在我們的 apns 資料，可以自訂一些額外的 key-value 來給我們自訂的推播通知 Scene 做顯示，而唯一要注意的是 category 要跟我們 WKNotificationScene 搭配的 category 是一樣的，不然就只會以預設的樣式來呈現推播通知。

{
    "aps": {
        "alert": {
            "title": "XcodeProject"
            "body": "新文章通知",
        },
        "category": "newPost"
    },
    
    "Simulator Target Bundle": "com.Ricky.XcodeProject.watchkitapp",
    
    "title": "自行設計 Apple Watch 的推播通知畫面",
    "content": "用 WKNotificationScene 可自行設計推播通知的畫面"
}

處理接收推播通知的 Controller

WKNotificationScene 的第一個參數會需要一個型別是 WKUserNotificationHostingController 的 Controller，而這個 WKUserNotificationHostingController 會幫我們橋接 SwiftUI View。

import SwiftUI
import UserNotifications

class NotificationController: WKUserNotificationHostingController<NotificationView> {
  
    var title = ""
    var content = ""
    
    override var body: NotificationView {
        NotificationView(postTitle: title, postContent: content)
    }
    
    ovarride func didReceive(_ notification: UNNotification) {
        let content = notification.request.content
        self.title = content.userInfo["title"] as? String ?? ""
        self.content = content.userInfo["content"] as? String ?? ""
    }
}

實作上，我們要給一個自己實作推播通知畫面的 SwiftUI View 型別（此處為 NotificationView，就是一個普通的 SwiftUI View），當 Apple Watch 收到推播通知時，會執行 didReceive，我們就能透過 notification.request.content.userInfo 來取得自訂的 apns key-value 資料，並傳給 NotificationView。