Appcelerator Blog

The Leading Resource for All Things Mobile

New in SDK 3.4 – iOS 8 Interactive Notifications

27 Flares 27 Flares ×

As you know, earlier this month we announced support for iOS 8. One of the new iOS 8 features included in the 3.4.0 SDK is the capability of sending “Interactive Notifications”, with which you can show a notification while the app is running in background, and allow the user to interact with it without having to launch the app. Notifications can be placed as Banner Messages (Shown on the top of the screen), or in the lock screen.

Here’s how it works. First, you need to ask the user for permission to receive User Notifications.

Important: Starting with iOS 8 you absolutely need to do this for both Local and Push notifications.

Ti.App.iOS.registerUserNotificationSettings({
        types: [Ti.App.iOS.USER_NOTIFICATION_TYPE_ALERT , Ti.App.iOS.USER_NOTIFICATION_TYPE_BADGE , Ti.App.iOS.USER_NOTIFICATION_TYPE_SOUND],
        categories: [downloadContent]
    });     

The “categories” property is user-defined, and this is where you first specify the options that will be shown to the user.

var downloadContent = Ti.App.iOS.createUserNotificationCategory({
  identifier: "DOWNLOAD_CONTENT",
  actionsForMinimalContext: [acceptAction, rejectAction]
});

The actionsForMinimalContext property defines how the options will be presented to the user.

var acceptAction = Ti.App.iOS.createUserNotificationAction({
    identifier: "ACCEPT_IDENTIFIER",
    title: "Accept",
    activationMode: Ti.App.iOS.USER_NOTIFICATION_ACTIVATION_MODE_FOREGROUND,
    destructive: false,
    authenticationRequired: true
});

var rejectAction = Ti.App.iOS.createUserNotificationAction({
    identifier: "REJECT_IDENTIFIER",
    title: "Reject",
    activationMode: Ti.App.iOS.USER_NOTIFICATION_ACTIVATION_MODE_BACKGROUND,
    destructive: true,
    authenticationRequired: false
});

You then need to add event listeners for two cases: the app being in foreground and the app being in background.

// background
Ti.App.iOS.addEventListener('localnotificationaction', function(e) {
    console.log(JSON.stringify(e));

    if (e.identifier == "ACCEPT_IDENTIFIER") {
        alert("start download");
    }

    // remove the badge after 5 seconds
    if (e.badge > 0) { 
        Ti.App.iOS.scheduleLocalNotification({
            date: new Date(new Date().getTime() + 3000),
            badge: "-1"
        });
    }
});

// foreground 
Ti.App.iOS.addEventListener('notification', function(e) { 
    // remove the badge after 5 seconds
    if (e.badge > 0) {
        Ti.App.iOS.scheduleLocalNotification({
            date: new Date(new Date().getTime() + 3000),
            badge: "-1"
        });
    }
}); 

Finally, once the app is setup, to send a notification simply specify the message and date/time when you want it to be shown.

var notif = Ti.App.iOS.scheduleLocalNotification({
    date: new Date(new Date().getTime()), // send it now
    alertBody: 'This is your message',
    badge: 1,
    userInfo: {"url": "http://www.download.com/resource/asset.json", id:"1"},
    category: "DOWNLOAD_CONTENT"
});     

If you want to try it out, you could clone this repo. When you run it, immediately hit the HOME button and here’s what you’ll see.

After 5 seconds a notification will pop up and a badge will be added to the App’s icon. You can interact with this notification from the Notification Center.

Now go back to the app and click on “Trigger Notification in 3 seconds”, and immediately lock the phone. In three seconds the notification will be shown in the lock screen.

Keep in mind that this feature is only available in iOS 8 and your app needs to be compiled with SDK version 3.4. For more details about this feature, read the full guide.

27 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 27 Email -- 27 Flares ×

6 Comments

  1. JAYESH

    How to add splash screen for ios – 8 ? for iPhone / iPAd ?

  2. Danny

    Thanks for the tutorial. Was hoping that Apple allows 3rd party apps to use “quick reply” like iMessage does but unfortunately this isn’t a public API.

  3. Jorge

    Thx for the tutorial.
    Then, What is the diference between Push Notifications and Interactive Notification?

    • Andy

      Push is a remotely posted message through a direct connection to the device.
      A local notification is done by the app itself using own own code

  4. Joseph Sachs

    It is fairly important to note the option to handle remote push Actions:

    Ti.App.iOS.addEventListener(‘remotenotificationaction’, function(e) {

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
27 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 27 Email -- 27 Flares ×