Use case: in-app notification center

Overview

The base use cases for GetSocial Notifications API is to build a Facebook like 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.

Not supported in Flutter and Web

Flutter SDK and Web SDK don’t provide a UI library. If you’re using one of these SDKs, you’ll need to implement your own Notification Center.

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.

   

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

   Android

   val notificationsQuery = NotificationsQuery
       .withStatuses(NotificationStatus.READ, NotificationStatus.UNREAD)
   
   Notifications.getCount(notificationsQuery, { count -> /* Display count */ >}, { error -> /* Error happened */ })
   

   iOS

   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)")
   })
   

   Unity

   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 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.

Android

NotificationCenterViewBuilder.create(NotificationsQuery.withAllStatuses())
    .setFilterByTypes(Notification.NotificationType.TARGETING)
    .show()

iOS

let ncView = GetSocialUINotificationCenterView.viewForQuery(NotificationsQuery.withAllStatuses())
ncView.filterTypes = [GetSocialNotificationType.TARGETING.rawValue]
ncView.show()

Unity

NotificationCenterViewBuilder.Create(NotificationsQuery.withAllStatuses())
    .SetFilterByTypes(new []{ Notification.NotificationTypes.Targeting })
    .Show();

Build your own UI with data API

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.

   Android

   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")
   })
   

   iOS

   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)")
   })
   

   Unity

   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:

   Android

   if (NotificationStatus.UNREAD.equals(notification.status)) {
       // Show notification as unread on the UI
   }
   

   iOS

   if notification.status == GetSocialNotificationStatus.unread {
       // Show notification as unread on the UI
   }
   

   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.

   Android

   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}") }
   )
   

   iOS

   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)")
   })
   

   Unity

   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.

   Android

   // getsocial.json
   {
       // ...
       "pushNotifications": {
           ...
           "customListener": true
       }
   }
   

   iOS

   // getsocial.json
   {
       // ...
       "pushNotifications": {
           ...
           "customListener": true
       }
   }
   

   Unity

   Go to menu panel → GetSocial → Edit Settings → Push 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.
   Android

   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)
           }
       }
   }
   

   iOS

   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)
       }
   }
   

   Unity

   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.

   Android

   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}") }
       )
   }
   

   iOS

   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)")
       })
   }
   

   Unity

   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.

   Android

   // getsocial.json
   {
       // ...
       "pushNotifications": {
           ...
           "foreground": true
       }
   }
   

   iOS

   // getsocial.json
   {
       // ...
       "pushNotifications": {
           ...
           "foreground": true
       }
   }
   

   Unity

   Go to menu panel → GetSocial → Edit Settings → Push 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:

   Android

   Notifications.setOnNotificationReceivedListener { notification: Notification ->
       Log.d("Notifications", "Notification received: " + notification.text)
   }
   

   iOS

   Notifications.setOnNotificationReceivedListener{ notification in
       // Notification received while app was in foreground
   }
   

   Unity

   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

• Check more use cases for the GetSocial Notifications

Give us your feedback! Was this article helpful?

😀 🙁