玩轉 iOS 10 推送 —— UserNotifications Framework(下)

pikacode發表於2019-02-21

《上》我們們聊了一些:

  • iOS 10 before 推送的流程
  • iOS 10 beta 推送的基本使用方法
  • 以及跟 iOS 10 before 推送的區別

《中》向大家詳細介紹了:

  • Notification Actions:3d-touch 輕觸推送橫幅操作
  • Dismiss Actions:鎖屏推送側滑操作 | 通知中心推送側滑操作 | 非 3d-touch 橫幅下拉操作
  • Response handling:點選橫幅或操作的後續處理
  • Service Extension:更新推送橫幅(alert 變為 title subtitle content)

《下》篇中將為大家介紹更加進階的內容:

  • Notifications User Interface:iOS 10 推送 UI
  • Media Attachments:在推送橫幅裡增加圖片、gif、音訊、視訊
  • Customization:完全自定義推送橫幅的 UI,並在點選操作以後立即更新推送橫幅 UI

Notifications User Interface

我們先來看一下 iOS 10 預設的推送 UI。
包括「橫幅、鎖屏、通知中心 」三處,看起來差不多的樣子。

玩轉 iOS 10 推送 —— UserNotifications Framework(下)

Media Attachments

推送內容中增圖片、gif、audio、video。
在以上的三個介面都可以通過 3d-touch 觸發。
先一起來看看效果。

玩轉 iOS 10 推送 —— UserNotifications Framework(下)

玩轉 iOS 10 推送 —— UserNotifications Framework(下)

新增方法

  1. 開啟 iOS Xcode Project - File - New - Target - iOS - Notification Service Extension - Next - Product Name 填寫 yourPushNotificationService - Finish
    具體圖示方法,在《中》裡有詳細的介紹。

  2. 新增檔案。把你們定製的各種 media 檔案拖拽至上一步系統自動生成的 yourPushNotificationService 資料夾下,勾上 copy to items,add to targets 一定要選擇這個 Notification Service 作為 target,如下所示。

    玩轉 iOS 10 推送 —— UserNotifications Framework(下)

  3. 新增程式碼。在 2 中生成的 NotificationService.m 裡新增程式碼:

    -(void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    
     self.contentHandler     = contentHandler;
    
     // 1.把推送內容轉為可變型別
     self.bestAttemptContent = [request.content mutableCopy];
    
     // 2.獲取 1 中自定義的欄位 value
     NSString *urlStr = [request.content.userInfo valueForKey:@"your-attachment"];
    
     // 3.將資料夾名和字尾分割
     NSArray *urls    = [urlStr componentsSeparatedByString:@"."];
    
     // 4.獲取該檔案在本地儲存的 url
     NSURL *urlNative = [[NSBundle mainBundle] URLForResource:urls[0] withExtension:urls[1]];
    
     // 5.依據 url 建立 attachment
     UNNotificationAttachment *attachment = [UNNotificationAttachment attachmentWithIdentifier:urlStr URL:urlNative options:nil error:nil];
    
     // 6.賦值 @[attachment] 給可變內容
     self.bestAttemptContent.attachments = @[attachment];
    
     // 7.處理該內容
     self.contentHandler(self.bestAttemptContent);
    }複製程式碼
  4. 先執行你的專案 target 使之在手機上安裝,再執行 Notification Service 的 target,並選擇在你的專案上執行該 Extension。此時可進行 Notification Service 程式碼的除錯,即在 NotificationService.m 中打斷點可以除錯,但是在你的專案中的斷點無法除錯。

  5. 傳送 payload 需依照下述格式:

    {  
       aps : { 
           alert : {...}, 
           mutable-content : 1 //必須
       }
       your-attachment : aPicture.png //必須
    }複製程式碼

    其中:

    • mutable-content : 1 說明該推送在接收後可被修改,這個欄位決定了系統是否會呼叫 Notification Service 中的方法。
    • your-attachment:是自定義的欄位,key 可以自定義(你自己要記住),value 需要是一個完整的檔名(或 url,後續會詳細解釋),即你想要展示的檔案。
  6. 手機接收後,在任一個能看到推送條目的介面對推送條目進行 3d-touch 強按都可以觸發。(需要 iPhone 6s 及以後裝置 & iOS 10)

  7. 提示:各種 media 檔案大小有一定限制,圖片、視訊等過大都不會被展示,Apple 的意思是:對於圖片,最大寬度也就和螢幕等寬,過大的圖片沒有意義;對於音訊、視訊等,完全可以提供一個短時間預覽部分,更多的內容還是需要使用者點選推送進入 App 之後對完整的內容進行檢視。希望開發者遵從這樣的邏輯進行開發。

Notification Content

iOS 10 新增的另一項 Extension,用於完全自定義推送展示的 UI 介面,響應 Actions 的同時重新整理該 UI。簡單的說就是你可以把需要推送的內容(比如一條完整的新聞快訊,包括多條文字+圖片的組合)全部放到一條推送裡,使用者點選了一個 Action(如贊、踩、關注、甚至評論等),在推送裡立刻重新整理 UI(如展示加星動畫、評論內容等)。

特點

  • 需要新增 Notification content extension
  • 完全自定義 UI
  • 推送 UI 不能響應觸控、點選、滑動等任何手勢
  • 可以響應 notification actions

下圖中日程表的 UI 完全由開發者自定義,並且在點選了 Accept 之後,UI 立即發生了變化:

玩轉 iOS 10 推送 —— UserNotifications Framework(下)

新增方法

開啟 iOS Xcode Project - File - New - Target - iOS - Notification Content - Next - Product Name 填寫 yourPushNotificationContent - Finish

系統會在 Xcode 工程目錄中 自動生成 yourPushNotificationContent 資料夾,並且包含四個檔案:NotificationViewController.hNotificationViewController.mMainInterface.storyboardInfo.plist

NotificationViewController.h/m
  • 繼承自 UIViewController,並實現了 UNNotificationContentExtension 協議。
  • 你可以在 viewDidLoad 裡各種程式碼寫你的 UI,或者使用 storyboard 拖拖拽拽就 ok。
  • 在 didReceiveNotification 方法裡接收推送內容,然後各種處理邏輯、傳值、展示 UI 等等。當點選了 actions,也會走到這裡,並且包含一個 action 的欄位,判斷點選了哪個 action 進而相應的更新你的 UI。
MainInterface.storyboard

拖拖拽拽一個 UI 就出來了 ^。^

Info.plist
  • 需要在這裡讓系統知道,哪個 id 欄位會觸發你這個 extension。

    玩轉 iOS 10 推送 —— UserNotifications Framework(下)

    高亮部分欄位的值,需要跟 Notification Actions 的 category id 值一樣,這樣收到推送時,就會同時觸發 Notification content + Notification actions。

  • 同時這裡也可以新增多個值,用於收到不同的推送,展示類似的 UI。
    比如接受聚會邀請和提醒聚會邀請,UI 相近,操作卻不同。

    玩轉 iOS 10 推送 —— UserNotifications Framework(下)

除錯

當你各種 UI 展示後,會發現存在 2 個問題。

其一

是系統會自動展示一遍收到的推送內容,這部分很可能跟你的內容是重複的。

玩轉 iOS 10 推送 —— UserNotifications Framework(下)

解決方法

在 Info.plist 中新增如下欄位,並且把值設為 YES 即可隱藏系統預設的展示。

玩轉 iOS 10 推送 —— UserNotifications Framework(下)

其二

是展示內容比較少的時候,系統仍然會以最大的介面展示出來,會露出很多空白部分。

玩轉 iOS 10 推送 —— UserNotifications Framework(下)

解決方法
方法一:在 viewDidLoad 中調整 self 的 size 以達到一個合適的尺寸。如下獲取了 size,並修改至一半的高度。
- (void)viewDidLoad {
    [super viewDidLoad];
    CGSize size = self.view.bounds.size;
    self.preferredContentSize = CGSizeMake(size.width, size.height/2);
}複製程式碼

效果如下所示,仔細看你會發現存在小 bug,先展示了完整的高度,然後瞬間變成一半的高度,看起來有個高度適應的動畫的樣子。導致這種結果的原因是系統準備展示推送的時候,還沒有執行到你的程式碼(展示從系統層級到 App 層級的過程),這是蘋果內部的機制所致。

玩轉 iOS 10 推送 —— UserNotifications Framework(下)

方法二:還是在 Info.plist 檔案新增新的欄位,設定縮放比例。

這樣系統層級會預先讀取該資料,用於展示。當然有時候展示的內容不同,需要的高度不同,而這裡只能設定成唯一的固定值。不過這也是現階段蘋果所能給你提供的可行方法了。

玩轉 iOS 10 推送 —— UserNotifications Framework(下)

然後最終的展示效果如下,沒有上面那個不舒服的高度調整動畫了。

玩轉 iOS 10 推送 —— UserNotifications Framework(下)

小結

感覺 Notification Content 的功能極其強大,有了它之後連 App 都不需要再啟動了的樣子(只要能合理的設計展示內容和操作),省去了使用者每次為了一項簡單操作都要進行「啟動 App - 操作 - 切換到多工介面 - 退出 App」這樣的繁瑣過程。原本使用者看到推送可能不太有意願去檢視詳細內容,現在他只需要很簡單的操作就能快速的檢視,推送的點開率應該會因此而大幅增加吧。
究其如此便捷的原因,Notification Service Extension 和 Notification Content 都是獨立於專案的 target,收到推送後,系統會單獨執行這兩個 target,完全不會在此時去啟動 App 並執行 App 中大量的程式碼,童鞋們在除錯的時候也可以注意這一點。

以上
《玩轉 iOS 10 推送》上中下三篇就全部結束了,更多分享內容將會在之後奉上^。^

相關文章