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:

    1
    2
    3
    4
    val notificationsQuery = NotificationsQuery
        .withStatuses(NotificationStatus.READ, NotificationStatus.UNREAD)
    
    Notifications.getCount(notificationsQuery, { count -> /* Display count */ >}, { error -> /* Error happened */ })
    
    1
    2
    3
    4
    5
    6
    let query = NotificationsQuery.withStatuses( [NotificationStatus.unread, NotificationStatus.unread] )
    Notifications.count(query, success: { count in
        // Display count
    }, failure: { error in
        print("Failed to get notifications count, error: \(error)")
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var query = NotificationsQuery.WithStatuses(NotificationStatus.Unread, NotificationStatus.Read);
    Notifications.Count(query,
        (count) =>
        {
            // Display notifications count
        },
        (error) => {
            Debug.Log("Failed to get notifications count, error: " + error);
        });
    

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.

1
2
3
NotificationCenterViewBuilder.create(NotificationsQuery.withAllStatuses())
    .setFilterByTypes(Notification.NotificationType.TARGETING)
    .show()
1
2
3
let ncView = GetSocialUINotificationCenterView.viewForQuery(NotificationsQuery.withAllStatuses())
ncView.filterTypes = [GetSocialNotificationType.TARGETING.rawValue]
ncView.show()
1
2
3
NotificationCenterViewBuilder.Create(NotificationsQuery.withAllStatuses())
    .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.

    1
    2
    3
    4
    5
    6
    7
    8
    val query = NotificationsQuery.withStatuses(NotificationStatus.UNREAD, NotificationStatus.READ)
    val pagingQuery = PagingQuery(query)
    Notifications.get(pagingQuery, { result: PagingResult<Notification> ->
        val notifications = result.entries
        displayNotifications(notifications)
    }, { error: GetSocialError ->
        Log.d("Notifications", "Failed to get notifications: $error")
    })
    
    1
    2
    3
    4
    5
    6
    7
    let query = NotificationsQuery.withStatuses( [NotificationStatus.unread, NotificationStatus.read] )
    let pagingQuery = NotificationsPagingQuery(query)
    Notifications.get(pagingQuery, success: { result in
        self.showNotifications(result.notifications)
    }, failure: { error in
        print("Failed to get notifications, error: \(error)")
    })
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    var query = NotificationsQuery.WithStatuses(NotificationStatus.Unread, NotificationStatus.Read);
    var pagingQuery = new PagingQuery<NotificationsQuery>(query);
    
    Notifications.Get(pagingQuery,
        (result) => {
            ShowNotifications(result.Entries);
        },
        (error) => {
            Debug.Log("Failed to get notifications, error: " + error);
        );
    
  2. Highlight unread notifications. To check the notification status use:

    1
    2
    3
    if (NotificationStatus.UNREAD.equals(notification.status)) {
        // Show notification as unread on the UI
    }
    
    1
    2
    3
    if notification.status == GetSocialNotificationStatus.unread {
        // Show notification as unread on the UI
    }
    
    1
    2
    3
    4
    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.

    1
    2
    3
    4
    5
    6
    7
    8
    val notificationIds = notifications.map { notification -> notification.id }
    
    Notifications.setStatus(
        NotificationStatus.READ,
        notificationIds,
        { println("Marked all notifications as read") },
        { exception -> println("Failed to mark notifications as read, error: ${exception.message}") }
    )
    
    1
    2
    3
    4
    5
    6
    let notificationIds = notifications.map { $0.notificationId }
    Notifications.setStatus(NotificationStatus.read, notificationIds: notificationIds, success: {
        print("Marked all notifications as read")
    }, failure: { error in
        print("Failed to mark notifications as read, error: \(error)")
    })
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    var notificationsIds = notifications.Select(notification => notification.Id).ToList();
    
    Notifications.setStatus(
        NotificationStatus.Read,
        notificationsIds,
        () =>
        {
            Debug.Log("Marked all notifications as read");
        },
        error =>
        {
            Debug.LogError("Failed to mark notifications as read, error: " + error.Message);
        });
    
  4. Set property that you have a custom notification click listener.



    1
    2
    3
    4
    5
    6
    7
    8
    // getsocial.json
    {
        // ...
        "pushNotifications": {
            ...
            "customListener": true
        }
    }
    


    1
    2
    3
    4
    5
    6
    7
    8
    // getsocial.json
    {
        // ...
        "pushNotifications": {
            ...
            "customListener": true
        }
    }
    


    Go to menu panel → GetSocialEdit SettingsPush Notifications → enable Has Custom Notification On Click Listener setting.

  5. 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.
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    Notifications.setOnNotificationClickedListener { notification, context ->
        when (notification.action.type) {
            ActionTypes.OPEN_ACTIVITY -> {
                println("Received open activity feed notification")
                // we say GetSocial SDK to handle click on notification as usual
                GetSocial.handle(notification.action)
            }
            "open_schedule" -> {
                // Get the data we attached to the notification
                val sessionId = notification.action.data["schedule-session-id"]
    
                // Open schedule for the sessionId from the notification
                openSchedule(sessionId)
            }
            else -> {
                GetSocial.handle(notification.action)
            }
        }
    }
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    Notifications.setOnNotificationClickedListener{ (notification, context) in
        switch(notification.notificationAction.type) {
        case ActionType.openActivity:
            print("Received open activity feed notification")
            // By returning false, we say GetSocial SDK to handle click on notification as usual
            GetSocial.handle(notification.action)
        case "open-schedule":
            let sessionId = notification.action.data["schedule-session-id"]
    
            // Open schedule for the sessionId from the notification
            openSchedule(sessionId)
        default:
            GetSocial.handle(notification.action)
        }
    }
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    Notifications.SetOnNotificationClickedlistener((notification, context) =>
    {
        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
                GetSocial.Handle(notification.action)
            case "open-schedule":
                // Get the data we attached to the notification
                var sessionId = notification.NotificationAction.Data["schedule-session-id"];
    
                // Open schedule for the sessionId from the notification
                OpenSchedule(sessionId);
        }
        GetSocial.Handle(notification.action)
    });
    
  6. 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.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    fun clearNotifications(notifications: List<Notification>) {
        val notificationIds = notifications.map { notification -> notification.id }
    
        Notifications.setStatus(
            NotificationStatus.CONSUMED,
            notificationIds,
            { println("Cleared all notifications") },
            { exception -> println("Failed to clear notifications, error: ${exception.message}") }
        )
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    func clearNotifications(notifications: [GetSocialNotification]) {
        let notificationIds = notifications.map { $0.notificationId }
    
        Notifications.setStatus(NotificationStatus.consumed, notificationIds: notificationIds, success: {
            print("Cleared all notifications as read")
        }, failure: { error in
            print("Failed to clear notifications, error: \(error)")
        })
    }
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    void ClearNotifications(List<Notification> notifications)
    {
        var notificationsIds = notifications.Select(notification => notification.Id).ToList();
    
        Notifications.setStatus(
            NotificationStatus.Read,
            notificationsIds,
            () => Debug.Log("Cleared all notifications"),
            error =>Debug.LogError("Failed to clear all 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.



    1
    2
    3
    4
    5
    6
    7
    8
    // getsocial.json
    {
        // ...
        "pushNotifications": {
            ...
            "foreground": true
        }
    }
    


    1
    2
    3
    4
    5
    6
    7
    8
    // getsocial.json
    {
        // ...
        "pushNotifications": {
            ...
            "foreground": true
        }
    }
    


    Go to menu panel → GetSocialEdit SettingsPush Notifications → enable Show Notification In Foreground setting.

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

    1
    2
    3
    Notifications.setOnNotificationReceivedListener { notification: Notification ->
        Log.d("Notifications", "Notification received: " + notification.text)
    }
    
    1
    2
    3
    Notifications.setOnNotificationReceivedListener{ notification in
        // Notification received while app was in foreground
    }
    
    1
    2
    3
    4
    Notifications.SetOnNotificationReceivedListener(notification =>
    {
        Debug.Log("Notification received: " + notification.Text);
    });
    

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?

😀 🙁