Skip to main content

How to create a new in-app notification?

ShipFast comes with pre-configured in-app notifications support that allows you to keep your users informed of important updates and actions within your application. Both the backend and frontend share the `type`, which is a `CONSTANT_CASED` identifier.

Webapp Reference​

Generating a new notification is simple. You can use the following command from the webapp package:

yarn plop notification <type>

<type> is the notification identifier and name at once.

The command generates component and story files under the src/shared/components/notifications/templates/<type>/ path in the webapp package directory. The notification is automatically registered, so no further actions are required.

In the <type>.component.tsx file, you will see the component based on the <Notification/> interface that you can use to compose your notification. You need to define the data inside NotificationType:

type ItemAddedProps = NotificationType<{
  user: string | null;
  itemId: number;
}>;
caution

Keep in mind that mistakes in the data type (e.g., missing nulls) might produce error-prone code. Be careful!

Backend Reference​

The backend comes with built-in support for in-app notifications and the possibility to implement other types of notifications.

Strategies​

The enabled notification strategies are configurable with the NOTIFICATIONS_STRATEGIES variable in the settings.py file, which has a default value of ["InAppNotificationStrategy"].

To write your own notification strategy, you need to extend the BaseNotificationStrategy class, which can be found in the apps/notifications/strategies.py file. The only method that needs to be implemented is:

@staticmethod
def send_notification(user: str, type: str, data: dict):
    ...

There is also a second method that may come in handy:

@staticmethod
def should_send_notification(user: str, type: str):
    ...

With this method, you can decide whether a specific user should receive a notification with a specific type with that strategy.

Sending Notifications​

To send notifications to users, simply call the send_notification function, which can be found in the apps.notifications.sender module. It iterates through all enabled strategies and sends notifications with the specified type and payload to the specified user.