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

《上》咱们聊了一些:

  • 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。
包括「横幅、锁屏、通知中心 」三处,看起来差不多的样子。


Media Attachments

推送内容中增图片、gif、audio、video。
在以上的三个界面都可以通过 3d-touch 触发。
先一起来看看效果。

添加方法

  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,如下所示。

  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);
}
  1. 先运行你的项目 target 使之在手机上安装,再运行 Notification Service 的 target,并选择在你的项目上运行该 Extension。此时可进行 Notification Service 代码的调试,即在 NotificationService.m 中打断点可以调试,但是在你的项目中的断点无法调试。

  2. 发送 payload 需依照下述格式:

{  
      aps : { 
          alert : {...}, 
          mutable-content : 1 //必须
      }
      your-attachment : aPicture.png //必须
}

其中:

  • mutable-content : 1 说明该推送在接收后可被修改,这个字段决定了系统是否会调用 Notification Service 中的方法。
  • your-attachment:是自定义的字段,key 可以自定义(你自己要记住),value 需要是一个完整的文件名(或 url,后续会详细解释),即你想要展示的文件。
  1. 手机接收后,在任一个能看到推送条目的界面对推送条目进行 3d-touch 强按都可以触发。(需要 iPhone 6s 及以后设备 & iOS 10)

  2. 提示:各种 media 文件大小有一定限制,图片、视频等过大都不会被展示,Apple 的意思是:对于图片,最大宽度也就和屏幕等宽,过大的图片没有意义;对于音频、视频等,完全可以提供一个短时间预览部分,更多的内容还是需要用户点击推送进入 App 之后对完整的内容进行查看。希望开发者遵从这样的逻辑进行开发。

Notification Content

iOS 10 新增的另一项 Extension,用于完全自定义推送展示的 UI 界面,响应 Actions 的同时刷新该 UI。简单的说就是你可以把需要推送的内容(比如一条完整的新闻快讯,包括多条文字+图片的组合)全部放到一条推送里,用户点击了一个 Action(如赞、踩、关注、甚至评论等),在推送里立刻刷新 UI(如展示加星动画、评论内容等)。

特点

  • 需要添加 Notification content extension
  • 完全自定义 UI
  • 推送 UI 不能响应触摸、点击、滑动等任何手势
  • 可以响应 notification actions

下图中日程表的 UI 完全由开发者自定义,并且在点击了 Accept 之后,UI 立即发生了变化:


添加方法

打开 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。



    高亮部分字段的值,需要跟 Notification Actions 的 category id 值一样,这样收到推送时,就会同时触发 Notification content + Notification actions。

  • 同时这里也可以添加多个值,用于收到不同的推送,展示类似的 UI。
    比如接受聚会邀请和提醒聚会邀请,UI 相近,操作却不同。


调试

当你各种 UI 展示后,会发现存在 2 个问题。

其一

是系统会自动展示一遍收到的推送内容,这部分很可能跟你的内容是重复的。


解决方法

在 Info.plist 中添加如下字段,并且把值设为 YES 即可隐藏系统默认的展示。


其二

是展示内容比较少的时候,系统仍然会以最大的界面展示出来,会露出很多空白部分。


解决方法
方法一:在 viewDidLoad 中调整 self 的 size 以达到一个合适的尺寸。如下获取了 size,并修改至一半的高度。
- (void)viewDidLoad {
    [super viewDidLoad];
    CGSize size = self.view.bounds.size;
    self.preferredContentSize = CGSizeMake(size.width, size.height/2);
}

效果如下所示,仔细看你会发现存在小 bug,先展示了完整的高度,然后瞬间变成一半的高度,看起来有个高度适应的动画的样子。导致这种结果的原因是系统准备展示推送的时候,还没有执行到你的代码(展示从系统层级到 App 层级的过程),这是苹果内部的机制所致。


方法二:还是在 Info.plist 文件添加新的字段,设置缩放比例。

这样系统层级会预先读取该数据,用于展示。当然有时候展示的内容不同,需要的高度不同,而这里只能设置成唯一的固定值。不过这也是现阶段苹果所能给你提供的可行方法了。


然后最终的展示效果如下,没有上面那个不舒服的高度调整动画了。


小结

感觉 Notification Content 的功能极其强大,有了它之后连 App 都不需要再启动了的样子(只要能合理的设计展示内容和操作),省去了用户每次为了一项简单操作都要进行「启动 App - 操作 - 切换到多任务界面 - 退出 App」这样的繁琐过程。原本用户看到推送可能不太有意愿去查看详细内容,现在他只需要很简单的操作就能快速的查看,推送的点开率应该会因此而大幅增加吧。
究其如此便捷的原因,Notification Service Extension 和 Notification Content 都是独立于项目的 target,收到推送后,系统会单独运行这两个 target,完全不会在此时去启动 App 并执行 App 中大量的代码,童鞋们在调试的时候也可以注意这一点。

以上
《玩转 iOS 10 推送》上中下三篇就全部结束了,更多分享内容将会在之后奉上

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,179评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,229评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,032评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,533评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,531评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,539评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,916评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,813评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,568评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,654评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,354评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,937评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,918评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,152评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,852评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,378评论 2 342

推荐阅读更多精彩内容