Inapp Inbox Notifications

Marking Notifications As 'Seen' Without Reading The In-App Inbox Notification Feed In Stream-JS

Sanjeev Kumar
November 24, 2023
Mark notifications as 'seen' without reading them in the in-app inbox notification feed in Stream.js. Follow these codes to mark your push notifications as seen when the users see them out of app inboxes.
TABLE OF CONTENTS

Introduction:

In the realm of app development, swift and efficient notification handling is a key component of user engagement. This article explores a common challenge faced by developers using the stream-js library: marking a notification as "seen" without the need to read the entire notification feed.

Understanding the Challenge:

In scenarios where stream-js is employed, the task of marking a notification feed item as "seen" upon a user's interaction with a push notification is not straightforward. The hurdle lies in the fact that the addToMany calls, often used for efficiency, do not return the IDs of the added activities. On the contrary, the addActivity method provides the created activity, including the crucial activity ID.

Coding Block Example

    // Example of addActivity response
const response = {
  actor: 'ken',
  duration: '9.65ms',
  foreign_id: '',
  id: '8b5d69a9-8b73-11e8-98ab-12cb9e7b86a4',
  object: 'some-object',
  origin: null,
  target: '',
  time: '2018-07-19T16:48:21.045496',
  verb: 'add-activity'
};
Copied ✔

Identifying Added Activities:

To efficiently manage notifications, obtaining the activity ID is pivotal for subsequent actions.

Coding Block Example

    const activityId = response.id;
Copied ✔

Marking Notifications as Seen or Read:

Learn the process of marking a notification feed item as "seen" or "read" using the mark_seen or mark_read options.

Coding Block Example

    // Example: Marking all items as seen
const feed = client.feed('notification', 'user123');
feed.get({ mark_seen: true });

Copied ✔

Working with Activity Group IDs:

Understand the significance of activity group IDs when marking items as seen or read, focusing on the default aggregation format that utilizes the activity ID.

Efficient Solution:

Proposing a streamlined solution for marking a single activity as seen, leveraging the activity ID returned by the addActivity call.

Coding Block Example

// Example: Marking a specific activity group as seen
const feed = client.feed('notification', 'user123');
feed.get({ mark_seen: true, group: activityId });


Copied ✔

Handling addToMany and Efficiency Concerns:

Addressing concerns about using addToMany for populating many feeds and evaluating efficiency against practicality.

Explore InApp Inbox Before Use!

Conclusion:

In conclusion, this article provides a comprehensive guide for developers utilizing stream-js, offering insights into effectively managing notifications and overcoming the challenge of marking activities as "seen" without the need to read the entire feed. Developers are encouraged to choose the approach that best aligns with the specific needs of their application, ensuring a seamless and user-friendly notification experience.

Written by:
Sanjeev Kumar
Engineering, SuprSend
ABOUT THE AUTHOR

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Implement a powerful stack for your notifications

By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.