Skip to content

Use case: in-app notification center

Overview

The base use cases for GetSocial Notifications API is to build a Facebook like notification center.

Notification Center

Problem

According to the latest Localytics data, only 53% of the users have push notifications enabled. GetSocial Notifications provide a way to deliver notifications to 100% of the users. We send push notifications to users who have enabled them and provide an API to query notifications from the client SDK to build in-app notification center.

Implementation guide

Below you can find the implementation example based on the DevFest Ukraine conference application.

0. Prerequisite

  1. Integrate GetSocial SDK. Check the detailed guide on Android, iOS or Unity.

  2. Setup push notifications. Check the detailed setup guide on Android, iOS or Unity.

1. Show unread notifications count

  1. Add a UI element to show unread notifications count on the main application screen. It is important to keep the counter in a visible place, to grab the user’s attention.

    Notification Count

  2. Query GetSocial API to get the unread notifications count:

    ```java tab=”Android(Java)”
    NotificationsCountQuery notificationsCountQuery = NotificationsCountQuery
    .withStatuses(NotificationStatus.READ, NotificationStatus.UNREAD);

    GetSocial.User.getNotificationsCount(
    notificationsCountQuery,
    new Callback() {
    @Override
    public void onSuccess(Integer notificationsCount) {
    // Display notificationsCount
    }

    1
2
3
4
5
            @Override
        public void onFailure(GetSocialException exception) {
            Log.e("GetSocial", "Failed to get notifications count, error: " + exception.getMessage());
        }
    });

    kotlin tab=”Android(Kotlin)”
    val notificationsCountQuery = NotificationsCountQuery
    .withStatuses(NotificationStatus.READ, NotificationStatus.UNREAD)

    GetSocial.User.getNotificationsCount(notificationsCountQuery, object: Callback{
    override fun onSuccess(notificationsCount: Int) {
    // Display notificationsCount
    }

    override fun onFailure(exception: GetSocialException) {
    println(“Failed to get notifications count, error: ${exception.message}”)
    }
    })
    ```

    ```objc tab=”iOS(Objective-C)”
    GetSocialNotificationsCountQuery *query = [GetSocialNotificationsCountQuery withStatuses:@[ GetSocialNotificationStatusRead, GetSocialNotificationStatusUnread ]];
    [GetSocialUser notificationsCountWithQuery:query
    success:^(int result) {
    // Display notifications count
    }
    failure:^(NSError *error) {
    NSLog(@”Failed to get notifications count, error: %@”, error.description);
    }];

    ```swift tab="iOS(Swift)"
let query = GetSocialNotificationsCountQuery.withStatuses([GetSocialNotificationStatus.read, GetSocialNotificationStatus.unread])!
GetSocialUser.notificationsCount(with: query, success: { result in
    // Display notifications count
}, failure: { error in
    print("Failed to get notifications count, error: \(error)")
})

    ```c# tab=”Unity”
    var notificationsCountQuery = NotificationsCountQuery
    .WithStatuses(NotificationStatus.Read, NotificationStatus.Unread);

    GetSocial.User.GetNotificationsCount(
    notificationsCountQuery,
    notificationsCount =>
    {
    // Display notificationsCount
    },
    error =>
    {
    Debug.LogError(“Failed to get notifications count, error: ” + error.Message);
    });
    ```

2. Implement notification center UI

GetSocial SDK provides a prebuild UI for notification center and data API so you can build your own notification center.

Using GetSocial UI

GetSocial Notification Center

GetSocial UI library provides a prebuild notification center UI that supports:

  • Notification filtering by notification and action types: show only notifications sent from GetSocial Dashboard or only social notifications.
  • Notification statuses: mark notifications as read/unread or delete them.
  • Default click behaviors for notifications with predefined GetSocial Actions and all Activity Feed related notifications: clicking on the Activity Feed related notification takes a user directly to the post.
  • Custom click behaviors: handle notification and Action Button clicks for custom actions or override default behaviors.
  • Action Buttons support: display and handle as many action buttons as you need (first two buttons on the UI, the rest in the context menu).
  • Full theming support.

The example below shows how to open notifications center UI filtered to show only notifications sent from GetSocial Dashboard. For details check the Notification Center UI guide.

```java tab=”Android(Java)”
GetSocialUi.createNotificationCenterView()
.setFilterByTypes(Notification.NotificationType.TARGETING)
.show();

```kotlin tab="Android(Kotlin)"
GetSocialUi.createNotificationCenterView()
    .setFilterByTypes(Notification.NotificationType.TARGETING)
    .show()

```objc tab=”iOS(Objective-C)”
GetSocialUINotificationCenterView *ncView = [GetSocialUI createNotificationCenterView];
[ncView setFilterTypes:@[GetSocialNotificationTypeTARGETING]];
[ncView show];

```swift tab="iOS(Swift)"
let ncView = GetSocialUI.createNotificationCenterView()
ncView.filterTypes = [GetSocialNotificationType.TARGETING.rawValue]
ncView.show()

c# tab="Unity" GetSocialUi.CreateNotificationCenterView() .SetFilterByTypes(new []{ Notification.NotificationTypes.Targeting }) .Show();

Build your own UI with data API

Notification Center

Use GetSocial data API to create your own Notification Center UI. It may be useful when you want to build notification center different features from the ones provided in the GetSocial UI library or embed it into existing UI.

In our example, UI implements the following features:

  • Show notifications
  • Highlight unread notifications
  • Mark all notifications as READ after showing them
  • Trigger action attached to the notification on click
  • Remove all notifications

The step by step implementation guide:

  1. Show (query) notifications. Each notification can have one of the statuses: UNREAD, READ, CONSUMED or IGNORED.

    In our example, we will show UNREAD and READ notifications on the UI and use CONSUMED to mark notifications removed. IGNORED status won’t be used.

    ```java tab=”Android(Java)”
    NotificationsQuery notificationsQuery = NotificationsQuery
    .withStatuses(NotificationStatus.READ, NotificationStatus.UNREAD);

    GetSocial.User.getNotifications(
    notificationsQuery,
    new Callback>() {
    @Override
    public void onSuccess(List notifications) {
    // Display notifications on the UI
    showNotifications(notifications);
    }

    1
2
3
4
5
            @Override
        public void onFailure(GetSocialException exception) {
            Log.e("GetSocial", "Failed to get notifications, error: " + exception.getMessage());
        }
    });

    ```

    ```kotlin tab=”Android(Kotlin)”
    val notificationsQuery = NotificationsQuery
    .withStatuses(NotificationStatus.READ, NotificationStatus.UNREAD)

    GetSocial.User.getNotifications(notificationsQuery, object: Callback>{
    override fun onSuccess(notifications: List) {
    // Display notifications on the UI
    showNotifications(notifications)
    }

    1
2
3
    override fun onFailure(exception: GetSocialException) {
    println("Failed to get notifications, error: ${exception.message}")
}

    })
    ```

    objc tab="iOS(Objective-C)" GetSocialNotificationsQuery *query = [GetSocialNotificationsQuery withStatuses:@[ GetSocialNotificationStatusRead, GetSocialNotificationStatusUnread ]]; [GetSocialUser notificationsWithQuery:query success:^(NSArray<GetSocialNotification *> *notifications) { // Display notifications on the UI [self showNotifications:notifications]; } failure:^(NSError *error) { NSLog(@"Failed to get notifications, error: %@", error); }];

    swift tab="iOS(Swift)" let query = GetSocialNotificationsQuery.withStatuses( [GetSocialNotificationStatus.unread, GetSocialNotificationStatus.read] )! GetSocialUser.notifications(with: query, success: { (notifications:[GetSocialNotification]) in // Display notifications on the UI self.showNotifications(notifications) }) { (error : Error) in print("Failed to get notifications, error: \(error.localizedDescription)") }

    ```c# tab=”Unity”
    var notificationsQuery = NotificationsQuery
    .WithStatuses(NotificationStatus.Read, NotificationStatus.Unread);

    GetSocial.User.GetNotifications(
    notificationsQuery,
    notifications =>
    {
    // Display notifications on the UI
    ShowNotifications(notifications);
    },
    error =>
    {
    Debug.LogError(“Failed to get notifications, error: ” + error.Message);
    });
    ```

  2. Highlight unread notifications. To check the notification status use:

    java tab="Android(Java)" if (NotificationStatus.UNREAD.equals(notification.getStatus())) { // Show notification as unread on the UI }

    kotlin tab="Android(Kotlin)" if (NotificationStatus.UNREAD.equals(notification.status)) { // Show notification as unread on the UI }

    objc tab="iOS(Objective-C)" if ([notification.status isEqualToString:GetSocialNotificationStatusUnread]) { // Show notification as unread on the UI }

    swift tab="iOS(Swift)" if notification.status == GetSocialNotificationStatus.unread { // Show notification as unread on the UI }

    c# tab="Unity" if (notification.Status.Equals(NotificationStatus.Unread)) { // Show notification as unread on the UI }

  3. In our example, we will mark all notifications as READ after showing them for the first time.

    ```java tab=”Android(Java)”
    List notificationsIds = new ArrayList<>();
    for (Notification notification : notifications) {
    notificationsIds.add(notification.getId());
    }

    GetSocial.User.setNotificationsStatus(
    notificationsIds,
    NotificationStatus.READ,
    new CompletionCallback() {
    @Override
    public void onSuccess() {
    Log.i(“GetSocial”, “Marked all notifications as read”);
    }

    1
2
3
4
5
            @Override
        public void onFailure(GetSocialException exception) {
            Log.e("GetSocial", "Failed to mark notifications as read, error: " + exception.getMessage());
        }
    }

    );
    ```

    ```kotlin tab=”Android(Kotlin)”
    val notificationIds = notifications.map { notification ->
    notification.id
    }

    GetSocial.User.setNotificationsStatus(
    notificationIds,
    NotificationStatus.READ,
    object: CompletionCallback{
    override fun onSuccess() {
    println(“Marked all notifications as read”)
    }

    1
2
3
4
        override fun onFailure(exception: GetSocialException) {
        println("Failed to mark notifications as read, error: ${exception.message}")
    }
})

    ```

    objc tab="iOS(Objective-C)" NSMutableArray *notificationIds = [NSMutableArray new]; for (GetSocialNotification *notification in notifications) { [notificationIds addObject:notification.notificationId]; } [GetSocialUser setNotificationsStatus:notificationsIds status:GetSocialNotificationStatusRead success:^{ NSLog(@"Marked all notifications as read"); } failure:^(NSError *error) { NSLog(@"Failed to mark notifications as read, error: %@", error); }];

    swift tab="iOS(Swift)" let notificationIds = notifications.map { $0.notificationId! } GetSocialUser.setNotificationsStatus(notificationIds, status: GetSocialNotificationStatus.read, success: { print("Marked all notifications as read") }, failure: { error in print("Failed to mark notifications as read, error: \(error)") })

    ```c# tab=”Unity”
    var notificationsIds = notifications.Select(notification => notification.Id).ToList();

    GetSocial.User.SetNotificationsStatus(
    notificationsIds,
    NotificationStatus.Read,
    () =>
    {
    Debug.Log(“Marked all notifications as read”);
    },
    error =>
    {
    Debug.LogError(“Failed to mark notifications as read, error: ” + error.Message);
    });
    ```

  4. Trigger an action on notification click. Each notification may have an action attached to it. GetSocial SDK provides a set of predefined actions, like OPEN_ACTIVITY, as well as custom actions.

    In the example below we’ll handle two actions:

    • Predefined OPEN_ACTIVITY, used to open in-app forums powered by GetSocial Activity Feeds
    • Custom action to open the conference schedule.

    ```java tab=”Android(Java)”
    GetSocial.setNotificationListener(new NotificationListener() {
    @Override
    public boolean onNotificationReceived(Notification notification, boolean wasClicked) {
    if (!wasClicked) {
    // if if wasn’t clicked we won’t act to notification, though we may show some dialog or in-app notification
    return false;
    }
    switch (notification.getAction().getType())
    {
    case ActionTypes.OPEN_ACTIVITY:
    Log.i(“GetSocial”, “Received open activity feed notification”);
    // By returning false, we say GetSocial SDK to handle click on notification as usual
    return false;
    case “open-schedule”:
    // Get the data we attached to the notification
    String sessionId = notification.getAction().getData().get(“schedule-session-id”);

    1
2
3
4
5
6
7
8
                // Open schedule for the sessionId from the notification
            openSchedule(sessionId);

            // By returning true, we tell GetSocial SDK that we've already handled the notification
            return true;
    }
    return false;
}

    });
    ```

    ```kotlin tab=”Android(Kotlin)”
    GetSocial.setNotificationListener { notification, wasClicked ->
    if (!wasClicked) {
    // if if wasn’t clicked we won’t act to notification, though we may show some dialog or in-app notification
    return@setNotificationListener false
    }
    when (notification.action.type) {
    ActionTypes.OPEN_ACTIVITY -> {
    println(“Received open activity feed notification”)
    // By returning false, we say GetSocial SDK to handle click on notification as usual
    return@setNotificationListener false
    }
    “open_schedule” -> {
    // Get the data we attached to the notification
    val sessionId = notification.action.data[“schedule-session-id”]

    1
2
3
4
5
6
7
8
            // Open schedule for the sessionId from the notification
        openSchedule(sessionId)

        // By returning true, we tell GetSocial SDK that we've already handled the notification
        return@setNotificationListener true
    }
}
return@setNotificationListener false

    }
    ```

    ```objc tab=”iOS(Objective-C)”
    [GetSocial setNotificationHandler:^BOOL(GetSocialNotification *notification, BOOL wasClicked) {
    if (!wasClicked) {
    // if if wasn’t clicked we won’t act to notification, though we may show some dialog or in-app notification
    return NO;
    }
    if ([notification.notificationAction.type isEqualToString:GetSocialActionOpenActivity]) {
    NSLog(@”Received open activity feed notification”);
    return NO;
    } else if ([notification.notificationAction.type isEqualToString:@”open-schedule”]) {
    // Get the data we attached to the notification
    NSString *sessionId = notification.notificationAction.data[@”schedule-session-id”];

    1
2
3
4
5
6
7
        // Open schedule for the sessionId from the notification
    [self openSchedule:sessionId];

    // By returning true, we tell GetSocial SDK that we've already handled the notification
    return true;
}
return NO;

    }];
    ```

    ```swift tab=”iOS(Swift)”
    GetSocial.setNotificationHandler { (notification, wasClicked) -> Bool in
    if !wasClicked {
    // if if wasn’t clicked we won’t act to notification, though we may show some dialog or in-app notification
    return false
    }
    switch(notification.notificationAction.type.rawValue) {
    case GetSocialActionType.openActivity.rawValue:
    print(“Received open activity feed notification”)
    // By returning false, we say GetSocial SDK to handle click on notification as usual
    return false
    case “open-schedule”:
    let sessionId = notification.notificationAction.data[GetSocialActionDataKey.init(“schedule-session-id”)]

    1
2
3
4
5
6
7
8
        // Open schedule for the sessionId from the notification
    openSchedule(sessionId)

    // By returning true, we tell GetSocial SDK that we've already handled the notification
    return true
default:
    return false
}

    }
    ```

    ```c# tab=”Unity”
    GetSocial.SetNotificationListener((notification, clicked) =>
    {
    if (!wasClicked)
    {
    // if if wasn’t clicked we won’t act to notification, though we may show some dialog or in-app notification
    return false;
    }
    switch (notification.NotificationAction.Type)
    {
    case GetSocialActionType.OpenActivity:
    Debug.Log(“Received open activity feed notification”);
    // By returning false, we say GetSocial SDK to handle click on notification as usual
    return false;
    case “open-schedule”:
    // Get the data we attached to the notification
    var sessionId = notification.NotificationAction.Data[“schedule-session-id”];

    1
2
3
4
5
6
7
            // Open schedule for the sessionId from the notification
        OpenSchedule(sessionId);

        // By returning true, we tell GetSocial SDK that we've already handled the notification
        return true;
}
return false;

    });
    ```

  5. Remove all notifications. In step 2, you can see that we’re querying only for UNREAD and READ notifications. To implement notification removal, we will set notification status to CONSUMED.

    Setting CONSUMED or IGNORED status is irreversible

    You can change notification status from UNREAD to READ and vice versa as many times as you want. But after notification status is changed to CONSUMED or IGNORED it cannot be changed back.

    ```java tab=”Android(Java)”
    void clearNotifications(List notifications)
    {
    List notificationsIds = new ArrayList<>();
    for (Notification notification : notifications) {
    notificationsIds.add(notification.getId());
    }

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    GetSocial.User.setNotificationsStatus(
        notificationsIds,
        // We use consumed status to mark notifications cleared 
        NotificationStatus.CONSUMED,
        new CompletionCallback() {
            @Override
            public void onSuccess() {
                Log.i("GetSocial", "Cleared all notifications");
            }

            @Override
            public void onFailure(GetSocialException exception) {
                Log.e("GetSocial", "Failed to clear notifications, error: " + exception.getMessage());
            }
        });

    }
    ```

    ```kotlin tab=”Android(Kotlin)”
    GetSocial.User.setNotificationsStatus(notificationIds,
    // We use consumed status to mark notifications cleared
    NotificationStatus.CONSUMED,
    object : CompletionCallback{
    override fun onSuccess() {
    println(“Cleared all notifications”)
    }

    1
2
3
4
        override fun onFailure(exception: GetSocialException) {
        println("Failed to clear notifications, error: ${exception.message}")
    }
})

    ```

    objc tab="iOS(Objective-C)" - (void)cleanNotifications:(NSArray<GetSocialNotification *> *)notifications { NSMutableArray *notificationIds = [NSMutableArray new]; for (GetSocialNotification *notification in notifications) { [notificationIds addObject:notification.notificationId]; } [GetSocialUser setNotificationsStatus:notificationsIds status:GetSocialNotificationStatusConsumed success:^{ NSLog(@"Marked all notifications as read"); } failure:^(NSError *error) { NSLog(@"Failed to mark notifications as read, error: %@", error); }]; }

    ```swift tab=”iOS(Swift)”
    func clearNotifications(notifications: [GetSocialNotification]) {
    let notificationIds = notifications.map { $0.notificationId! }

    1
2
3
4
5
    GetSocialUser.setNotificationsStatus(notificationIds, status: GetSocialNotificationStatus.consumed, success: {
    print("Marked all notifications as read")
}, failure: { error in
    print("Failed to mark notifications as read, error: \(error)")
})

    }
    ```

    ```c# tab=”Unity”
    void ClearNotifications(List notifications)
    {
    var notificationsIds = notifications.Select(notification => notification.Id).ToList();

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    GetSocial.User.SetNotificationsStatus(
    notificationsIds, 
    // We use consumed status to mark notifications cleared 
    NotificationStatus.Consumed,
    () =>
    {
        Debug.Log("Cleared all notifications");
    },
    error =>
    {
        Debug.LogError("Failed to clear notifications, error: " + error.Message);
    });

    }
    ```

3. Display notifications as soon as they arrive

By default, GetSocial SDK is not showing notification as soon as they arrive. There two ways to implement it:

  1. Enable push notifications in foreground. After enabling this option push notification will be displayed as soon as they arrive, even if application is in the fullscreen or gaming mode.



    In the GetSocial Gradle Plugin configuration set:


    groovy getsocial { // ... foregroundNotifications true }


    In the GetSocial iOS Installer Script set:


    bash "$PROJECT_DIR/getsocial.sh" --app-id="your-getsocial-app-id" --foreground-notifications="true"


    Go to menu panel → GetSocial → Edit Settings → General Settings → enable Show Notifications In Foreground setting.

  2. Alternatively, when the app is in the foreground, you can listen for new notifications and handle them on your own:

    ```java tab=”Android(Java)”
    GetSocial.setNotificationListener(new NotificationListener() {
    @Override
    public boolean onNotificationReceived(Notification notification, boolean wasClicked) {
    if (!wasClicked) {
    // wasClicked=false means that notification arrives when app is in foreground
    // show notification in app here

    1
2
3
4
            return true;
    }
    return false;
}

    });
    ```

    kotlin tab="Android(Kotlin)" GetSocial.setNotificationListener { notification, wasClicked -> if (!wasClicked) { // wasClicked=false means that notification arrives when app is in foreground // show notification in app here return@setNotificationListener true } return@setNotificationListener false }

    ```objc tab=”iOS(Objective-C)”
    [GetSocial setNotificationHandler:^BOOL(GetSocialNotification *notification, BOOL wasClicked) {
    // Handle notifications
    if (!wasClicked) {
    // wasClicked=NO means that notification arrives when app is in foreground
    // show notification in app here

    1
2
3
        return YES;
}
return NO;

    }];
    ```

    ```swift tab=”iOS(Swift)”
    GetSocial.setNotificationHandler { (notification, wasClicked) -> Bool in
    if !wasClicked {
    // wasClicked=false means that notification arrives when app is in foreground
    // show notification in app here

    1
2
3
        return true
}
return false

    }
    ```

    ```c# tab=”Unity”
    GetSocial.SetNotificationListener((notification, wasClicked) =>
    {
    if (!wasClicked)
    {
    // wasClicked=false means that notification arrives when app is in foreground
    // show notification in app here

    1
2
3
        return true;
}
return false;

    }
    ```

4. Customize push notification icon

On Android, you have to customize the big and small notification icons. Check how to do it on Android or Unity/Android.

On iOS, the application icon will be used.

Try it out

Download DevFest Ukraine conference application to check notification center implementation in action.

Try in the app

Next steps

Give us your feedback! Was this article helpful?

😀 🙁