WWDC 2016:rich notifications in IOS 10

<span id="Label3"></p>Notifications has gotten more than a visual refresh in IOS 10. As part of the new usernotifications framework, Apple have given us the ability to make notifications that contain images, sound, video, or even custom content generated on the Device. Much of this capability comes via three new features showcased at Wwdc:media attachments, Notification Service Extensions , and notification content Extensions.<p><p></p></p>Media Attachmentsa Media Attachment is an object we can attach to a notification that contains the URL of a media file. Supported media file types include common audio, video, and image Formats. There is even built-in support for animated Gifs–a surprising fact considering the lack of such-in classes-like UI ImageView. IOS presents media attachments in A-the-would look familiar if you ' ve ever received a notification for a photo mess Age from Apple ' s Messages app.<p><p></p></p>Like a Messages alert, a notification containing an image or video attachment shows a thumbnail version of the Attachment. This was a nice preview, but the really special part happens when you 3D Touch the Notification. New in iOS, the notification now expands and displays a full-size version of the attachment with animation, action Butt ons, and playback controls enabled AUTOMATICALLY.<p><p></p></p><em>why <em>They is Awesome</em></em>Media attachments open up new opportunities for user engagement with our APPS. before, we were limited to just a couple lines of text; We had to rely in the user opening the app to does anything more. however, in keeping with Apple's push for "preview" style interactions using 3D Touch, We can now engage users with rich C Ontent without them has to open the app. This was a win-win for app makers and Users. APP makers get to deliver more compelling content on their notifications, and users get more choice at their level of Noti Fication Interaction.<em>how <em>they</em></em>Media attachments work slightly different between local notifications and remote Notifications. In the case of a local notification, it media attachment must contain the URL of a file on disk at the time this an app C Reates the Notification. The file is copied when the notification was scheduled, and that file was delivered along with the Notification. No Extra effort is Required. For a remote notification, a remote Notification service delivers information about the media attachment as part of the AP NS Notification Payload. This includes the attachment url, which, importantly, does not has the URL of a file already on the Device. however, IOS Ten won't automatically deliver an attachment with a notification if that attachment are not stored locally. Apple ' s solution to this problem is something called the Notification service extension.notification service Extensionsa Notification Service Extension is something we can build to an app which may download or change the content ofThat app ' s remote notifications without even opening the app. At 4KB in size, a remote notification ' s payload are too small to deliver a media attachment file itself. Instead, we define an attachment URL in the remote notification PAYLOAD. Once a device receives the remote notification payload for our app, the App's service extension gets the chance to Downloa d The file at the URL and attach it to the notification before the device displays the notification to the User.<em>why <em>They is Awesome</em></em>My first thought when looking @ This feature is, why does we need this? Why doesn ' t iOS just download the attachment automatically and add it to the notification? however, looking at some of the code generated when adding this extension in Xcode reveals Apple ' s intentions. Below is one of the functions we need to fill in when implementing a Notification Service Extension.<p><p></p></p> <table class="crayon-table"> <tbody> <tr class="crayon-row"> <td class="crayon-nums " data-settings="show">1234567</td> <td class="crayon-code"><span class="crayon-m"><span class="crayon-m">override<span class="crayon-h"> <span class="crayon-r">func<span class="crayon-h"> <span class="crayon-e">serviceextensiontimewillexpire<span class="crayon-sy">(<span class="crayon-sy">)<span class="crayon-h"> <span class="crayon-sy">{</span> </span> </span> </span> </span> </span></span></span></span></span><span class="crayon-h"><span class="crayon-h"> <span class="crayon-c">//called just before the extension</span> </span> would be terminated by the System.</span><span class="crayon-h"><span class="crayon-h"> <span class="crayon-c">//use this as a opportunity to deliver your ' best attempt ' at modified content, otherwise the original push payload'll be Used.</span> </span></span><span class="crayon-h"><span class="crayon-h">    <span class="crayon-st">if<span class="crayon-h"> <span class="crayon-r">let<span class="crayon-h"> <span class="crayon-v">contenthandler<span class="crayon-h"> Span class= "crayon-o" >=<span class="crayon-h"> <span class="crayon-v">contenthandler<span class="crayon-sy">,< Span class= "crayon-h" > <span class="crayon-r">let<span class="crayon-h"> <span class="crayon-v"> Bestattemptcontent<span class="crayon-h"> <span class="crayon-o">=<span class="crayon-h">  <span class="crayon-e">bestattemptcontent<span class="crayon-h"> <span class="crayon-sy">{</span> </span> </span> </span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </span><span class="crayon-h"><span class="crayon-h"> <span class="crayon-e">ContentHandler<span class="crayon-sy">(<span class="crayon-v">bestattemptcontent<span class="crayon-sy">)</span> </span> </span> </span> </span></span><span class="crayon-h"><span class="crayon-h">    <span class="crayon-sy">}</span></span></span><span class="crayon-sy"><span class="crayon-sy">}</span></span></td> </tr> </tbody> </table><p><p></p></p>Network calls is inherently unreliable, and this method is one-off Apple has given us to guard against poor user Experien Ce as a consequence. In the case where we attachment takes too long to download and the OS executes this<span id="crayon-57e13c34891eb277428153" class="crayon-syntax crayon-syntax-inline crayon-theme-willow-tree-apps crayon-theme-willow-tree-apps-inline crayon-font-droid-sans-mono"><span id="crayon-57e13c34891eb277428153" class="crayon-syntax crayon-syntax-inline crayon-theme-willow-tree-apps crayon-theme-willow-tree-apps-inline crayon-font-droid-sans-mono"><span class="crayon-pre crayon-code"><span class="crayon-e">serviceextensiontimewillexpire<span class="crayon-sy">(<span class="crayon-sy">) callback, allowing us to fail gracefully and deliver a notification with "bes T attempt "content. What's content should be would depend on the app, but the Notification Service Extension provides us the ability deliver it if Necessary.</span> </span> </span></span></span></span><em>how <em>they</em></em>On the notification server side, sending a notification that'll be processed by a service extension are as simple as sett ing the fields in the APNS payload.<p><p></p></p> <table class="crayon-table"> <tbody> <tr class="crayon-row"> <td class="crayon-nums " data-settings="show">1234567</td> <td class="crayon-code"><span class="crayon-sy"><span class="crayon-sy">{</span></span><span class="crayon-h"><span class="crayon-h"> <span class="crayon-v">APs<span class="crayon-o">:<span class="crayon-h"> <span class="crayon-sy">{</span> </span> </span> </span> </span></span><span class="crayon-h"><span class="crayon-h"> <span class="crayon-v">alert<span class="crayon-o">:<span class="crayon-h"> <span class="crayon-sy">{<span class="crayon-o">... <span class="crayon-sy">}</span></span></span></span></span></span></span></span><span class="crayon-h"><span class="crayon-h"> <span class="crayon-v">mutable<span class="crayon-o">-<span class="crayon-v">content<span class="crayon-o">:<span class="crayon-h"> <span class="crayon-cn">1</span> </span> </span> </span> </span> </span> </span></span><span class="crayon-h"><span class="crayon-h">  <span class="crayon-sy">}</span></span></span><span class="crayon-h"><span class="crayon-h"> <span class="crayon-v">My<span class="crayon-o">-<span class="crayon-v">attachment<span class="crayon-o">:<span class="crayon-h"> <span class="crayon-s">"https://foo.bar/baz.jpg"</span> </span> </span> </span> </span> </span> </span></span><span class="crayon-sy"><span class="crayon-sy">}</span></span></td> </tr> </tbody> </table><p><p></p></p>The<span id="crayon-57e13c34891fd450904937" class="crayon-syntax crayon-syntax-inline crayon-theme-willow-tree-apps crayon-theme-willow-tree-apps-inline crayon-font-droid-sans-mono"><span id="crayon-57e13c34891fd450904937" class="crayon-syntax crayon-syntax-inline Crayon-theme-willow-tree-apps Crayon-theme-willow-tree-apps-inline crayon-font-droid-sans-mono "><span class=" crayon-pre crayon-code "><span class="crayon-v">mutable<span class="crayon-o">-<span class="crayon-v">content fields tells IOS that the Notification have content that can is changed by a service extension before delivery, and The <span id="crayon-57e13c3 489205487506067 " class=" crayon-syntax crayon-syntax-inline Crayon-theme-willow-tree-apps Crayon-theme-willow-tree-apps-inline crayon-font-droid-sans-mono "><span class=" crayon-pre crayon-code "><span class="crayon-v">my<span class="crayon-o">-<span class="crayon-v">attachment field contains the URL for the Content to is Downloaded. </span> </span> </span> </span> </span> </span> </span> </span> </span> </span></span>To do an app extension that would handle that notification, we just add a notification service extension as a new target In the app s Xcode project. Xcode would generate a file containing a subclass of<span id="crayon-57e13c348920e225958313" class="crayon-syntax crayon-syntax-inline crayon-theme-willow-tree-apps crayon-theme-willow-tree-apps-inline crayon-font-droid-sans-mono">Unnotificationserviceextension with and functions to be <span id="crayon-57e13c348920e225958313" class="crayon-syntax crayon-syntax-inline crayon-theme-willow-tree-apps crayon-theme-willow-tree-apps-inline crayon-font-droid-sans-mono"><span class="crayon-pre crayon-code"><span class="crayon-v">Overridden.</span></span></span></span><p><p></p></p> <table class="crayon-table"> <tbody> <tr class="crayon-row"> <td class="crayon-nums " data-settings="show">1234567</td> <td class="crayon-code"><span class="crayon-m"><span class="crayon-m">override<span class="crayon-h"> <span class="crayon-r">func<span class="crayon-h"> <span class="crayon-e">didreceive<span class="crayon-sy"> (<span class="crayon-i">_<span class="crayon-h"> <span class="crayon-v">request<span class="crayon-o">:<span class="crayon-h"> <span class="crayon-v">UNNotificationRequest< Span class= "crayon-sy" >,<span class="crayon-h"> <span class="crayon-e">withcontenthandler <span class="crayon-v"> Contenthandler<span class="crayon-o">:<span class="crayon-sy"> (<span class="crayon-v">unnotificationcontent< Span class= "crayon-sy" >) <span class="crayon-h"> <span class="crayon-o">-><span class="crayon-h"> <span class=" Crayon-t ">void<span class=" crayon-sy ">) <span class=" crayon-h "> <span class=" crayon-sy ">{</span> </span> </span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </span></span></span></span></span></span></span><span class="crayon-h"><span class="crayon-h">  <span class="crayon-c">// ...</span></span></span><span class="crayon-sy"><span class="crayon-sy">}</span></span><span class="crayon-c"><span class="crayon-c">// ...</span></span><span class="crayon-m"><span class="crayon-m">override<span class="crayon-h"> <span class="crayon-r">func<span class="crayon-h"> <span class="crayon-e">serviceextensiontimewillexpire<span class="crayon-sy">(<span class="crayon-sy">)<span class="crayon-h"> <span class="crayon-sy">{</span> </span> </span> </span> </span></span></span></span></span></span><span class="crayon-h"><span class="crayon-h">  <span class="crayon-c">// ...</span></span></span><span class="crayon-sy"><span class="crayon-sy">}</span></span></td> </tr> </tbody> </table><p><p></p></p>We use the first function to download the content from the URL and add it to the Notification. We should also handle network errors Here. We Use the second function, mentioned earlier, to handle the case where the first function is runs out of time (as determined by iOS). The end result is a remote notification with a media attachment this, from the user ' s perspective, looks, feels, and works The same as a local notification with locally stored Content. But what if we don ' t just want to serve up simple media files? What if we want to generate new content which has the a same look and feel as our app? That's where Notification Content Extensions come in. Notification content Extensionsa Notification content Extension is similar to a Notification Service Extension in that it Gives us a chance to process a notification and supply new content to the notification before it's displayed to the User. however, these extension types differ in and important ways. first, a content extension may operate On both remote and local notifications. Second, a content extension does not merely alter a media attachment; It supplies an entire uiviewcontroller to be rendered upon notification Expansion.<em>why <em>They is Awesome</em></em>Content extensions give us the power to render notifications with app-native Content–that are, content with the style, CAPA bilities, and local context of the app Itself–without actually have to load the app. IOS renders a content extension ' s view inside the same kind of expanded notification used by the Previous. Notifications on the Apple ' s own Calendar app make for a great example.<p><p></p></p>We See here A local notification on a calendar event that uses the same kind of visualization as the calendar app Itsel F would use to display the Event. and, because the view is rendered locally with Calendar app user data, The view can show information on the event in th E Context of other events on the user ' s calendar. Such content Extensions present a great opportunity for the personalization of Notifications. There is one crucial limitation in content extensions, however, which speaks strongly to the Apple feels content Exten Sions should is used by Developers. User interaction is all but disabled to content extensions, save for notification action buttons and optional media playb Ack Controls. Even with the limitation, however, we have ample opportunity to make rich, engaging notifications using content extension S.<em>how <em>they</em></em>Like a service extension, adding a content extension to an app are as simple as creating one as a new target for our apps in Xcode. Xcode generates a new storyboard file and corresponding source code file as well as the "info.plist" file for our content E Xtension. The source code file contains a subclass of <span id="crayon-57e13c3489222978107683" class="crayon-syntax crayon-syntax-inline crayon-theme-willow-tree-apps crayon-theme-willow-tree-apps-inline crayon-font-droid-sans-mono"><span id="crayon-57e13c3489222978107683" class="crayon-syntax crayon-syntax-inline Crayon-theme-willow-tree-apps Crayon-theme-willow-tree-apps-inline crayon-font-droid-sans-mono "><span class=" crayon-pre crayon-code "><span class="crayon-v">uiviewcontroller that implements The <span id="crayon-57e13c348922b145382044" class=" Crayon-syntax Crayon-syntax-inline Crayon-theme-willow-tree-apps Crayon-theme-willow-tree-apps-inline Crayon-font-droid-sans-mono "><span class=" crayon-pre crayon-code "><span class=" crayon-v "> Unnotificationcontentextension protocol. To do our content extension work, we need only flesh out the required protocol function, customize the "view in the" story board, and set the category ID of the The notifications we want to handle in the "info.plist" file. We may also implement optional functions that handle action button presses or display media playback controls. </span> </span></span></span></span></span></span>Summaryapple have given developers three great new features for delivering notifications with rich, engaging content to app Users. We can show full-size images, play audio and video, or even display custom visualizations in notifications before users EV En open Our apps. Apple is pushing-kind of tiered interaction using 3D Touch in it own apps, and users are going to come to E Xpect it in all the apps they use. If Your app displays notifications for any reason, you ' re going to want to explore how can take advantage of these GRE At Features. Helpful Linksxcode 8 Betanotificationsdemo projectapple ' s Local and Remote notifications programming Guideusernotifications Frameworkusernotificationsui FRAMEWORKWWDC 2016:introduction to Notifications VideoWWDC 2016: Advanced Notifications Video<p><p>WWDC 2016:rich notifications in IOS 10</p></p></span>