{"id":10412,"date":"2017-03-06T13:55:46","date_gmt":"2017-03-06T13:55:46","guid":{"rendered":"https:\/\/mobisoftinfotech.com\/resources\/?p=10412"},"modified":"2017-03-06T15:14:39","modified_gmt":"2017-03-06T15:14:39","slug":"ios-10-rich-notifications-tutorial","status":"publish","type":"post","link":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial","title":{"rendered":"iOS 10 Rich Notifications Tutorial"},"content":{"rendered":"<p>iOS 10 has added two new notification extensions: <a href=\"https:\/\/developer.apple.com\/reference\/usernotifications\/unnotificationserviceextension\" target=\"_blank\" rel=\"nofollow\">Service<\/a> and <a href=\"https:\/\/developer.apple.com\/reference\/usernotificationsui\/unnotificationcontentextension\" target=\"_blank\" rel=\"nofollow\">Content<\/a>.<\/p>\n<p>Service extensions let you change notification payloads and Content extensions gives you a way to show a custom interface for the notifications.<\/p>\n<p>Service extensions:<br>\nService extensions give you a time to process on notification payloads before notification is displayed to the user. For example, download image, GIF, Video, decrypt text to display it in the notification.<\/p>\n<p>A Service extension\u2019s entry point class<br>\nUNNotificationServiceExtension<\/p>\n<p>It overrides 2 methods:<\/p>\n<pre style=\"background-color: #f3f3f7;\">- (<span style=\"color: #0000ff;\">void<\/span>)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(<span style=\"color: #0000ff;\">void<\/span> (^)(UNNotificationContent *_Nonnull))contentHandler\n\n- (<span style=\"color: #0000ff;\">void<\/span>)serviceExtensionTimeWillExpire\n<\/pre>\n<p>When the notification payload contains: <strong>mutable-content = 1<\/strong> in the aps dictionary, system do not show the notification instantly to a user instead it start the service extension. Service extensions start the processing on the notification payload. Once this is completed notification is shown to the user<\/p>\n<pre style=\"background-color: #f3f3f7;\">- (<span style=\"color: #0000ff;\">void<\/span>)didReceiveNotificationRequest:\n<\/pre>\n<p>This method gets called when service extension starts. Here you can do processing required on the notification, for example: modify all of the basic properties of a notification including the title, subtitle, body, badge count,userInfo, download audio, images, GIFs, video once media is downloaded to the disk, set the media path by initializing an instance of <strong>[UNNotificationAttachment]<\/strong>.<\/p>\n<p>once all the processing is done call the completion block.<\/p>\n<pre style=\"background-color: #f3f3f7;\">- (<span style=\"color: #0000ff;\">void<\/span>)serviceExtensionTimeWillExpire;\n<\/pre>\n<p>System gives you a limited amount of time to process a notification. If this processing is not completed in the allotted time, expire methods get called. So if you are planing to download 3-4 images make sure if this is not completed within the time, create the attachment of the downloaded images and return the completion handler and cancel pending download.<\/p>\n<p>You can see rich notification by using 3D touch or pulling down on the notification. Service notification displays the default UI.<\/p>\n<p>What if you want to show custom UI\u2026 use Content extensions for customizing notification interface.<\/p>\n<p><strong>Content extensions:<\/strong><\/p>\n<p>Content extensions allows to show customized interface to the user, Remember you will still need service extensions to do all the processing required on the notification payload.<\/p>\n<p>The system starts content extension when a notification with the <strong>\u201ccategory\u201d<\/strong> key is present in the <strong>\u201caps\u201d<\/strong> dictionary and the key&#8217;s value should match to the value present in the content extension\u2019s info.plist <strong>[UNNotificationExtensionCategory]<\/strong>. You can have multiple categories for content extension and depending on the category type UI gets updated.<\/p>\n<p>Content extension\u2019s entry point class is<br>\n<span style=\"color: #800080;\">UIViewController<\/span> <span style=\"color: #0000ff;\">and<\/span> it <span style=\"color: #0000ff;\">implements<\/span> protocol<\/p>\n<pre style=\"background-color: #f3f3f7;\">- (<span style=\"color: #0000ff;\">void<\/span>)didReceiveNotification:(<span style=\"color: #800080;\">UNNotification<\/span> <span style=\"color: #808000;\">*<\/span>)notification;\n<\/pre>\n<p>This protocol gets called when the user expands a notification banner by 3D Touching or pulling down or by tapping the view button after swiping from right to left in Notification Center.<\/p>\n<p>System appends the original notification UI at the bottom of the custom interface. If you want to hide it use:<br>\n<strong>[UNNotificationExtensionDefaultContentHidden = True]<\/strong> in the content extension\u2019s info.plist<\/p>\n<p>The system animates the notification to a height based on a ratio specified by the <strong>UNNotificationExtensionInitialContentSizeRatio<\/strong> key in your content extension\u2019s info.plist.<\/p>\n<p>If you\u2019ve attached a media object to the notification in the service extensions you can access it in content extensions by performing one addition step. Before accessing attachment URL call <strong>[startAccessingSecurityScopedResource()]<\/strong> When you\u2019re done accessing the media, you must call <strong>[stopAccessingSecurityScopedResource()]<\/strong><\/p>\n<p><strong>Make sure you need to create unique bundle identifier for service and content extensions.<\/strong><\/p>\n<p><strong>Service notification payload example<\/strong><\/p>\n<pre style=\"background-color: #f3f3f7;\">{\"aps\": {\"alert\": {\"body\": \"checkout my pic\", \"title\": \"Super!\"},\"mutable-content\": 1},\"pic_url\": \"URL\"}\n<\/pre>\n<p><strong>Content notification payload<\/strong><\/p>\n<pre style=\"background-color: #f3f3f7;\">{\"aps\": {\"alert\": {\"body\": \"checkout our pic\", \"title\": \"Super!\"},\"mutable-content\": 1,\"category\":\"myNotificationCategory\"},\"pic_url\": \"URL\"}\n<\/pre>\n<p>Do remember that <strong>&#8220;mutable-content&#8221;: 1,&#8221;category&#8221;:&#8221;myNotificationCategory&#8221; these values are present within the aps dic.<\/strong><\/p>\n<p>We have enough information by now to start with an example so let\u2019s start:<\/p>\n<ol>\n<li>Open xcode and create single view application named it Rich Notification.<\/li>\n<li>Add Push notification method in the AppDelegate this methods are required to register the app to receive notification.<\/li>\n<li>Then go to New-&gt; Target and select service extensions.<\/li>\n<\/ol>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-10418\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/service-extension-rich-notifications-mobisoft-infotech.png\" alt=\"service extension rich notifications mobisoft infotech\" width=\"745\" height=\"469\" srcset=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/service-extension-rich-notifications-mobisoft-infotech.png 745w, https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/service-extension-rich-notifications-mobisoft-infotech-300x189.png 300w\" sizes=\"(max-width: 745px) 100vw, 745px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-10418 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20745%20469%22%3E%3C%2Fsvg%3E\" alt=\"service extension rich notifications mobisoft infotech\" width=\"745\" height=\"469\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20745%20469%22%3E%3C%2Fsvg%3E 745w\" sizes=\"(max-width: 745px) 100vw, 745px\" data-srcset=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/service-extension-rich-notifications-mobisoft-infotech.png 745w, https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/service-extension-rich-notifications-mobisoft-infotech-300x189.png 300w\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/service-extension-rich-notifications-mobisoft-infotech.png\"><\/p>\n<p>Name it ServiceExtension and save it<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-10419\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/notification-service-rich-notifications-mobisoft-infotech.png\" alt=\"notification service rich notifications mobisoft infotech\" width=\"745\" height=\"471\" srcset=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/notification-service-rich-notifications-mobisoft-infotech.png 745w, https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/notification-service-rich-notifications-mobisoft-infotech-300x190.png 300w\" sizes=\"(max-width: 745px) 100vw, 745px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-10419 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20745%20471%22%3E%3C%2Fsvg%3E\" alt=\"notification service rich notifications mobisoft infotech\" width=\"745\" height=\"471\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20745%20471%22%3E%3C%2Fsvg%3E 745w\" sizes=\"(max-width: 745px) 100vw, 745px\" data-srcset=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/notification-service-rich-notifications-mobisoft-infotech.png 745w, https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/notification-service-rich-notifications-mobisoft-infotech-300x190.png 300w\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/notification-service-rich-notifications-mobisoft-infotech.png\"><\/p>\n<p>Now look for the ServiceExtention folder in the project navigator and expand it you will see NotificationService.h&amp;.m and its info.plist.<\/p>\n<p>Let\u2019s first set the provisioning profile for the service extension, as said earlier you need to have unique bundle identifier and provisioning profile for each extension<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-10420\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/provisioning-profile-mobisoft-infotech.png\" alt=\"provisioning profile mobisoft infotech\" width=\"745\" height=\"471\" srcset=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/provisioning-profile-mobisoft-infotech.png 745w, https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/provisioning-profile-mobisoft-infotech-300x190.png 300w\" sizes=\"(max-width: 745px) 100vw, 745px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-10420 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20745%20471%22%3E%3C%2Fsvg%3E\" alt=\"provisioning profile mobisoft infotech\" width=\"745\" height=\"471\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20745%20471%22%3E%3C%2Fsvg%3E 745w\" sizes=\"(max-width: 745px) 100vw, 745px\" data-srcset=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/provisioning-profile-mobisoft-infotech.png 745w, https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/provisioning-profile-mobisoft-infotech-300x190.png 300w\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/provisioning-profile-mobisoft-infotech.png\"><\/p>\n<p>Now lets write some code to download images in the service extension.<\/p>\n<p><span style=\"color: #800080;\">Open<\/span> class <span style=\"color: #800080;\">NotificationService.m<\/span>, <span style=\"color: #0000ff;\">and<\/span> write following code in the<br>\n[didReceiveNotificationRequest]\n<\/p><pre style=\"background-color: #f3f3f7;\">- (<span style=\"color: #0000ff;\">void<\/span>)didReceiveNotificationRequest:(<span style=\"color: #800080;\">UNNotificationRequest<\/span> <span style=\"color: #808000;\">*<\/span>)request withContentHandler:(void (<span style=\"color: #808000;\">^<\/span>)(<span style=\"color: #800080;\">UNNotificationContent<\/span> *_<span style=\"color: #800080;\">Nonnull<\/span>))contentHandler\n{\n    self.contentHandler = contentHandler;\n    self.bestAttemptContent = [request.content mutableCopy];\n    \n    <span style=\"color: #993300;\">\/\/ Modify the notification content here...\n    \/\/ self.bestAttemptContent.body = [NSString stringWithFormat:@\"%@ [modified]\", self.bestAttemptContent.body];\n    \n    \/\/ check for media attachment, example here uses custom payload keys mediaUrl and mediaType<\/span>\n    <span style=\"color: #800080;\">NSDictionary<\/span> <span style=\"color: #808000;\">*<\/span>userInfo = request.content.userInfo;\n    <span style=\"color: #0000ff;\">if<\/span> (userInfo == <span style=\"color: #0000ff;\">nil<\/span>)\n    {\n        [<span style=\"color: #0000ff;\">self<\/span> contentComplete];\n        return;\n    }\n    \n    <span style=\"color: #0000ff;\">if<\/span> ([userInfo objectForKey:<span style=\"color: #808000;\">@<\/span>\"pic_url\"])\n    {\n        \n        [<span style=\"color: #0000ff;\">self<\/span> loadAttachmentForUrlString:[userInfo objectForKey:<span style=\"color: #808000;\">@<\/span>\"pic_url\"]\n                       completionHandler: <span style=\"color: #808000;\">^<\/span>(<span style=\"color: #800080;\">UNNotificationAttachment<\/span> <span style=\"color: #808000;\">*<\/span>attachment) {\n                           self.bestAttemptContent.attachments = [<span style=\"color: #800080;\">NSArray<\/span> arrayWithObjects:attachment, <span style=\"color: #0000ff;\">nil<\/span>];\n                       }];\n\n    }\n}\n<\/pre>\n<p>In this protocol, [didReceiveNotificationRequest] we access the userInfo and start downloading the image from image url using NSURL session. Once the image is downloaded UNNotificationAttachment object is initialized with local downloaded path and the attachment object is set to the notification object.<\/p>\n<p>We will define custom method which will download the image in the local directory.<\/p>\n<pre style=\"background-color: #f3f3f7;\">- (<span style=\"color: #0000ff;\">void<\/span>)loadAttachmentForUrlString:(<span style=\"color: #800080;\">NSString<\/span> *)urlString\n                 completionHandler:(void (^)(<span style=\"color: #800080;\">UNNotificationAttachment<\/span> *))completionHandler\n{\n    __block <span style=\"color: #800080;\">UNNotificationAttachment<\/span> *attachment = <span style=\"color: #0000ff;\">nil<\/span>;\n    __block NSURL *attachmentURL = [NSURL <span style=\"color: #800080;\">URLWithString<\/span>:urlString];\n\n    NSString *fileExt = [@\".\" stringByAppendingString:[urlString pathExtension]];\n\n\n    <span style=\"color: #800080;\">NSURLSession<\/span> *session = [NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration]];\n\n    <span style=\"color: #800080;\">NSURLSessionDownloadTask<\/span> *task = [session downloadTaskWithURL:attachmentURL\n                                                completionHandler: ^(NSURL *temporaryFileLocation, NSURLResponse *response, NSError *error) {\n                                          <span style=\"color: #0000ff;\">if<\/span> (error != <span style=\"color: #0000ff;\">nil<\/span>)\n                                          {\n                                              NSLog(@\"%@\", error.localizedDescription);\n                                          }\n                                          <span style=\"color: #0000ff;\">else<\/span>\n                                          {\n                                              <span style=\"color: #800080;\">NSFileManager<\/span> *fileManager = [<span style=\"color: #800080;\">NSFileManager<\/span> defaultManager];\n                                              NSURL *localURL = [NSURL fileURLWithPath:[temporaryFileLocation.path\n                                                                                        stringByAppendingString:fileExt]];\n                                              [fileManager moveItemAtURL:temporaryFileLocation\n                                                                   toURL:localURL\n                                                                   error:&amp;error];\n\n                                             <span style=\"color: #800080;\"> NSError<\/span> *attachmentError = <span style=\"color: #0000ff;\">nil<\/span>;\n                                              attachment = [<span style=\"color: #800080;\">UNNotificationAttachment<\/span> attachmentWithIdentifier:[attachmentURL lastPathComponent]\n                                                                                                          URL:localURL\n                                                                                                      options:<span style=\"color: #0000ff;\">nil<\/span>\n                                                                                                        error:&amp;attachmentError];\n                                              <span style=\"color: #0000ff;\">if<\/span> (attachmentError)\n                                              {\n                                                  NSLog(@\"%@\", attachmentError.localizedDescription);\n                                              }\n                                          }\n                                          completionHandler(attachment);\n                                      }];\n\n    [task resume];\n}\n<\/pre>\n<p>By now, we have completed the process of downloading image and setting the image to attachment object.<\/p>\n<p>Now let\u2019s handle to return completion handler once the processing is done or when time will expire protocol gets called.<\/p>\n<pre style=\"background-color: #f3f3f7;\">- (<span style=\"color: #0000ff;\">void<\/span>)serviceExtensionTimeWillExpire\n{\n<span style=\"color: #993300;\">\/\/ Called just before the extension will be terminated by the system.\n\/\/ Use this as an opportunity to deliver your \"best attempt\" at modified content, otherwise the original push payload will be used.<\/span>\n[<span style=\"color: #0000ff;\">self<\/span> contentComplete];\n}\n\n- (<span style=\"color: #0000ff;\">void<\/span>)contentComplete\n{\n[<span style=\"color: #0000ff;\">self<\/span>.session invalidateAndCancel];\n<span style=\"color: #0000ff;\">self<\/span>.contentHandler(self.bestAttemptContent);\n}\n<\/pre>\n<p>Build and run and send test notification. You can use pusher service to test this quickly, refer to the sample service extension payload example.<\/p>\n<p>Now lets add Content extension,<\/p>\n<ol>\n<li>Go to New-&gt; Target and select content extensions.<\/li>\n<li>Name it ContentExtension<\/li>\n<li>Set the bundle identifier and provisioning profile in the target for ContentExtension.<\/li>\n<\/ol>\n<p>Now look for the ContentExtension folder in the project navigator and expand it you will see NotificationViewController.h&amp;.m , info.plist and MainInterface.storyboard<\/p>\n<p>As discussed earlier it is a view controller class it has [MainInterface.storyboard] attached to it you can design your custom interface here\u2026<\/p>\n<p>In the plist make sure the category name is same as the one you receive in the notification payload.<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-10426\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/notification-view-controller-mobisoft-infotech-1.png\" alt=\"notification view controller mobisoft infotech\" width=\"745\" height=\"471\" srcset=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/notification-view-controller-mobisoft-infotech-1.png 745w, https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/notification-view-controller-mobisoft-infotech-1-300x190.png 300w\" sizes=\"(max-width: 745px) 100vw, 745px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-10426 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20745%20471%22%3E%3C%2Fsvg%3E\" alt=\"notification view controller mobisoft infotech\" width=\"745\" height=\"471\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20745%20471%22%3E%3C%2Fsvg%3E 745w\" sizes=\"(max-width: 745px) 100vw, 745px\" data-srcset=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/notification-view-controller-mobisoft-infotech-1.png 745w, https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/notification-view-controller-mobisoft-infotech-1-300x190.png 300w\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/notification-view-controller-mobisoft-infotech-1.png\"><\/p>\n<p>In the NotificationViewController.m let\u2019s write code to access the image attachment and set it to image view.<\/p>\n<pre style=\"background-color: #f3f3f7;\">- (<span style=\"color: #0000ff;\">void<\/span>)didReceiveNotification:(<span style=\"color: #800080;\">UNNotification<\/span> <span style=\"color: #808000;\">*<\/span>)notification\n{\n    <span style=\"color: #0000ff;\">self<\/span>.label.text = notification.request.content.body;\n    \n    <span style=\"color: #800080;\">NSDictionary<\/span> *dict = notification.request.content.userInfo;\n    \n    for (<span style=\"color: #800080;\">UNNotificationAttachment<\/span> *attachment in notification.request.content.attachments)\n    {\n        <span style=\"color: #0000ff;\">if<\/span> ([dict objectForKey:<span style=\"color: #808000;\">@<\/span>\"<span style=\"color: #008000;\">pic_url<\/span>\"] <span style=\"color: #808000;\">&amp;&amp;<\/span> [attachment.identifier\n                                                 isEqualToString:[[dict objectForKey:<span style=\"color: #808000;\">@<\/span><span style=\"color: #008000;\">\"pic_url\"<\/span>] lastPathComponent]])\n        {\n            <span style=\"color: #0000ff;\">if<\/span> ([attachment.URL startAccessingSecurityScopedResource])\n            {\n                <span style=\"color: #800080;\">NSData<\/span> *imageData = [<span style=\"color: #800080;\">NSData<\/span> dataWithContentsOfURL:attachment.URL];\n                \n                <span style=\"color: #0000ff;\">self<\/span>.picURL.image = [<span style=\"color: #800080;\">UIImage<\/span> imageWithData:imageData];\n                \n                <span style=\"color: #993300;\">\/\/ This is done if the spread url is not downloaded then both the image view will show cover url.<\/span>\n               <span style=\"color: #0000ff;\"> self<\/span>.picURL.image = [<span style=\"color: #800080;\">UIImage<\/span> imageWithData:imageData];\n                [attachment.URL stopAccessingSecurityScopedResource];\n            }\n        }\n    }\n}\n<\/pre>\n<p>Build and run. I used Pusher services to test the notification it is simple and quick, refer to the sample content extension payload given above. Download code from here\u2026<\/p>\n<p><strong>Conclusion:<\/strong><\/p>\n<p>So that is it. Isn&#8217;t it simple to work with Rich notification. Using Rich notification in the app you can improve the way the user interacts with your app. Further you can explore to provide action based rich notification to the user. So go ahead and replace your default notification with Rich notification.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>iOS 10 has added two new notification extensions: Service and Content. Service extensions let you change notification payloads and Content extensions gives you a way to show a custom interface for the notifications. Service extensions: Service extensions give you a time to process on notification payloads before notification is displayed to the user. For example, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10421,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[450],"tags":[595],"class_list":["post-10412","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mguide","tag-ios-10"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tutorial on iOS 10 Rich Notifications<\/title>\n<meta name=\"description\" content=\"Rich Notification in iOS 10 Can Improve the Way User Interacts with the App\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial on iOS 10 Rich Notifications\" \/>\n<meta property=\"og:description\" content=\"Rich Notification in iOS 10 Can Improve the Way User Interacts with the App\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial\" \/>\n<meta property=\"og:site_name\" content=\"Mobisoft Infotech\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-06T13:55:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-03-06T15:14:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/rich-notificatons-mobisoft-infotech.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"830\" \/>\n\t<meta property=\"og:image:height\" content=\"380\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pritam Barhate\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pritam Barhate\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#article\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial\"},\"author\":{\"name\":\"Pritam Barhate\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/fa762036b3364f26abeea146c01487ee\"},\"headline\":\"iOS 10 Rich Notifications Tutorial\",\"datePublished\":\"2017-03-06T13:55:46+00:00\",\"dateModified\":\"2017-03-06T15:14:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial\"},\"wordCount\":1000,\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/rich-notificatons-mobisoft-infotech.jpg\",\"keywords\":[\"iOS 10\"],\"articleSection\":[\"MGuide\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial\",\"name\":\"Tutorial on iOS 10 Rich Notifications\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/rich-notificatons-mobisoft-infotech.jpg\",\"datePublished\":\"2017-03-06T13:55:46+00:00\",\"dateModified\":\"2017-03-06T15:14:39+00:00\",\"author\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/fa762036b3364f26abeea146c01487ee\"},\"description\":\"Rich Notification in iOS 10 Can Improve the Way User Interacts with the App\",\"breadcrumb\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#primaryimage\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/rich-notificatons-mobisoft-infotech.jpg\",\"contentUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/rich-notificatons-mobisoft-infotech.jpg\",\"width\":830,\"height\":380,\"caption\":\"rich notificatons mobisoft infotech\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mobisoftinfotech.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"iOS 10 Rich Notifications Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/\",\"name\":\"Mobisoft Infotech\",\"description\":\"Discover Mobility\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/fa762036b3364f26abeea146c01487ee\",\"name\":\"Pritam Barhate\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/0e481c7ce54b3567ac70ddfc493523eefce0bdc3ee69fd2654f8f60a79e2f178?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e481c7ce54b3567ac70ddfc493523eefce0bdc3ee69fd2654f8f60a79e2f178?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e481c7ce54b3567ac70ddfc493523eefce0bdc3ee69fd2654f8f60a79e2f178?s=96&r=g\",\"caption\":\"Pritam Barhate\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial on iOS 10 Rich Notifications","description":"Rich Notification in iOS 10 Can Improve the Way User Interacts with the App","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial","og_locale":"en_US","og_type":"article","og_title":"Tutorial on iOS 10 Rich Notifications","og_description":"Rich Notification in iOS 10 Can Improve the Way User Interacts with the App","og_url":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial","og_site_name":"Mobisoft Infotech","article_published_time":"2017-03-06T13:55:46+00:00","article_modified_time":"2017-03-06T15:14:39+00:00","og_image":[{"width":830,"height":380,"url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/rich-notificatons-mobisoft-infotech.jpg","type":"image\/jpeg"}],"author":"Pritam Barhate","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pritam Barhate","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#article","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial"},"author":{"name":"Pritam Barhate","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/fa762036b3364f26abeea146c01487ee"},"headline":"iOS 10 Rich Notifications Tutorial","datePublished":"2017-03-06T13:55:46+00:00","dateModified":"2017-03-06T15:14:39+00:00","mainEntityOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial"},"wordCount":1000,"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/rich-notificatons-mobisoft-infotech.jpg","keywords":["iOS 10"],"articleSection":["MGuide"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial","url":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial","name":"Tutorial on iOS 10 Rich Notifications","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#primaryimage"},"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/rich-notificatons-mobisoft-infotech.jpg","datePublished":"2017-03-06T13:55:46+00:00","dateModified":"2017-03-06T15:14:39+00:00","author":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/fa762036b3364f26abeea146c01487ee"},"description":"Rich Notification in iOS 10 Can Improve the Way User Interacts with the App","breadcrumb":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#primaryimage","url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/rich-notificatons-mobisoft-infotech.jpg","contentUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2017\/03\/rich-notificatons-mobisoft-infotech.jpg","width":830,"height":380,"caption":"rich notificatons mobisoft infotech"},{"@type":"BreadcrumbList","@id":"https:\/\/mobisoftinfotech.com\/resources\/mguide\/ios-10-rich-notifications-tutorial#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mobisoftinfotech.com\/resources\/"},{"@type":"ListItem","position":2,"name":"iOS 10 Rich Notifications Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/mobisoftinfotech.com\/resources\/#website","url":"https:\/\/mobisoftinfotech.com\/resources\/","name":"Mobisoft Infotech","description":"Discover Mobility","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/fa762036b3364f26abeea146c01487ee","name":"Pritam Barhate","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0e481c7ce54b3567ac70ddfc493523eefce0bdc3ee69fd2654f8f60a79e2f178?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0e481c7ce54b3567ac70ddfc493523eefce0bdc3ee69fd2654f8f60a79e2f178?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e481c7ce54b3567ac70ddfc493523eefce0bdc3ee69fd2654f8f60a79e2f178?s=96&r=g","caption":"Pritam Barhate"}}]}},"_links":{"self":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/10412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/comments?post=10412"}],"version-history":[{"count":7,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/10412\/revisions"}],"predecessor-version":[{"id":10427,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/10412\/revisions\/10427"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media\/10421"}],"wp:attachment":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media?parent=10412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/categories?post=10412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/tags?post=10412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}