Starting with iOS 10 you can add custom content views to iOS push notifications. This library provides a class to accomplish that. It provides a default Image Slideshow view and is designed to be easily extensible to display additional view types.
Custom push notification content interfaces are enabled in iOS 10 via a Notification Content Extension, a separate and distinct binary embedded in your app bundle.
Your Podfile should look something like this:
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '10.0'
use_frameworks!
target 'YOUR_NOTIFICATION_CONTENT_TARGET_NAME' do
pod 'CTNotificationContent'
end
Then run pod install
Swift Package Manager is an Xcode tool that installs project dependencies. To use it to install CTNotificationContent SDK, follow these steps:
Enable push notifications in your main app.
Create a Notification Content Extension in your project. To do that in your Xcode project, select File -> New -> Target and choose the Notification Content Extension template.
Change the superclass of your NotificationViewController to CTNotificationViewController
. You should not implement any of the UNNotificationContentExtension protocol methods in your NotificationViewController class, those will be handled by CTNotificationViewController
. See Objective-C example here and Swift example here.
Edit the Maininterface.storyboard
in your NotificationContent target to a plain UIView, see example here.
In your AppDelegate, register the Notification category and actions:
Swift:
// register category with actions
let action1 = UNNotificationAction(identifier: "action_1", title: "Back", options: [])
let action2 = UNNotificationAction(identifier: "action_2", title: "Next", options: [])
let action3 = UNNotificationAction(identifier: "action_3", title: "View In App", options: [])
let category = UNNotificationCategory(identifier: "CTNotification", actions: [action1, action2, action3], intentIdentifiers: [], options: [])
UNUserNotificationCenter.current().setNotificationCategories([category])
Objective-C:
UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
UNNotificationAction *action1 = [UNNotificationAction actionWithIdentifier:@"action_1" title:@"Back" options:UNNotificationActionOptionNone];
UNNotificationAction *action2 = [UNNotificationAction actionWithIdentifier:@"action_2" title:@"Next" options:UNNotificationActionOptionNone];
UNNotificationAction *action3 = [UNNotificationAction actionWithIdentifier:@"action_3" title:@"View In App" options:UNNotificationActionOptionNone];
UNNotificationCategory *cat = [UNNotificationCategory categoryWithIdentifier:@"CTNotification" actions:@[action1, action2, action3] intentIdentifiers:@[] options:UNNotificationCategoryOptionNone];
[center setNotificationCategories:[NSSet setWithObjects:cat, nil]];
See Objective-C example here and Swift example here.
Then configure your Notification Content target Info.plist to reflect the category identifier you registered: NSExtension -> NSExtensionAttributes -> UNNotificationExtensionCategory
. In addition, set the UNNotificationExtensionInitialContentSizeRatio -> 0.1
and UNNotificationExtensionDefaultContentHidden -> true
.
Also, If you plan on downloading non-SSL urls please be sure to enable App Transport Security Settings -> Allow Arbitrary Loads -> true
in your plist. See plist example here.
(Back to top) While creating a Push Notification campaign on CleverTap, just follow the steps below -
pt_json
key to fill in the values.
Single media is for basic view with single image.
Content Slider is for image slideshow view where user can add multiple images with different captions, sub-captions, and actions.
Basic Template is the basic push notification received on apps where user can also update text colour, background colour.
Auto carousel is an automatic revolving carousel push notification where user can also update text colour, background colour.
This is the manual version of the carousel. The user can navigate to the next/previous image by clicking on the Next/Back buttons.
This template features a live countdown timer. You can even choose to show different title, message, and background image after the timer expires.
Note: If any image can't be downloaded, the template falls back to basic template with caption and sub caption only.
Configure your APNS payload:
Then, when sending notifications via APNS:
ct_ContentSlider
key with a json object value, see example below, to the payload, outside of the aps entry.{
"aps": {
"alert": {
"body": "test message",
"title": "test title",
},
"category": "CTNotification",
"mutable-content": true,
},
"ct_ContentSlider": {
"orientation": "landscape", // landscape assumes 16:9 images, remove to display default square/portrait images
"showsPaging": true, // optional to display UIPageControl
"autoPlay": true, // optional to auto play the slideshow
"autoDismiss": true, // optional to auto dismiss the notification on item actionUrl launch
"items":[
{
"caption": "caption one",
"subcaption": "subcaption one",
"imageUrl": "https://s3.amazonaws.com/ct-demo-images/landscape-1.jpg",
"actionUrl": "com.clevertap.ctcontent.example://item/one"
},
{
"caption": "caption two",
"subcaption": "subcaption two",
"imageUrl": "https://s3.amazonaws.com/ct-demo-images/landscape-2.jpg",
"actionUrl": "com.clevertap.ctcontent.example://item/two"
}
]
}
}
Basic Template Keys | Required | Description |
---|---|---|
pt_id | Required | Value - pt_basic |
pt_title | Required | Title |
pt_msg | Required | Message |
pt_msg_summary | Required | Message line when Notification is expanded |
pt_bg | Required | Background Color in HEX |
pt_big_img | Optional | Image |
pt_dl1 | Optional | One Deep Link |
pt_title_clr | Optional | Title Color in HEX |
pt_msg_clr | Optional | Message Color in HEX |
pt_json | Optional | Above keys in JSON format |
Auto Carousel Template Keys | Required | Description |
---|---|---|
pt_id | Required | Value - pt_carousel |
pt_title | Required | Title |
pt_msg | Required | Message |
pt_msg_summary | Optional | Message line when Notification is expanded |
pt_dl1 | Required | Deep Link |
pt_img1 | Required | Image One |
pt_img2 | Required | Image Two |
pt_img3 | Required | Image Three |
pt_bg | Required | Background Color in HEX |
pt_title_clr | Optional | Title Color in HEX |
pt_msg_clr | Optional | Message Color in HEX |
pt_json | Optional | Above keys in JSON format |
Manual Carousel Template Keys | Required | Description |
---|---|---|
pt_id | Required | Value - pt_manual_carousel |
pt_title | Required | Title |
pt_msg | Required | Message |
pt_msg_summary | Optional | Message line when Notification is expanded |
pt_dl1 | Required | Deep Link One |
pt_img1 | Required | Image One |
pt_img2 | Required | Image Two |
pt_img3 | Required | Image Three |
pt_bg | Required | Background Color in HEX |
pt_title_clr | Optional | Title Color in HEX |
pt_msg_clr | Optional | Message Color in HEX |
pt_json | Optional | Above keys in JSON format |
Timer Template Keys | Required | Description |
---|---|---|
pt_id | Required | Value - pt_timer |
pt_title | Required | Title |
pt_title_alt | Optional | Title to show after timer expires |
pt_msg | Required | Message |
pt_msg_alt | Optional | Message to show after timer expires |
pt_msg_summary | Optional | Message line when Notification is expanded |
pt_dl1 | Required | Deep Link |
pt_big_img | Optional | Image |
pt_big_img_alt | Optional | Image to show when timer expires |
pt_bg | Required | Background Color in HEX |
pt_chrono_title_clr | Optional | Color for timer text in HEX |
pt_timer_threshold | Required | Timer duration in seconds. Will be given higher priority. |
pt_timer_end | Optional | Epoch Timestamp to countdown to (for example, $D_1595871380 or 1595871380). Not needed if pt_timer_threshold is specified. |
pt_title_clr | Optional | Title Color in HEX |
pt_msg_clr | Optional | Message Color in HEX |
pt_json | Optional | Above keys in JSON format |
(Back to top) Refer to the Change Log.
link |
Stars: 9 |
Last commit: 3 days ago |
Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics