Custom vs. off-the-shelf React web notification systems: Which is better?

This post was originally written by Abid Ullah on the Ably Blog

When building a React web application, one feature you might be considering is a notification system. Notifications enhance the user experience by providing real time updates, alerts, or calls to action.

However, the big question is whether to build a custom notification system from scratch or go for an off-the-shelf solution. This choice isn't simple and can influence your project's overall cost, resource allocation, and success.

The dilemma boils down to this: should you invest time and resources in creating your own system or opt for a third-party service? Understanding the pros and cons of both options can make this decision easier for you. If you’re in the midst of this decision-making process, this article will help you by looking at the factors involved in custom-built systems, the potential hidden costs associated with them, and the off-the-shelf options.

Building a custom React notification system

There are several factors to examine when considering a custom-built React notification system. Each choice you make will affect the system's functionality and efficiency.

Let's look at these elements one by one.

1. Notifications source

There are two main types of notification source to consider:

• Local notifications: These notifications are generated by the React app itself. For example, a notification may pop up when a user completes a form incorrectly.
• Push notifications: These notifications come from a server. The server pushes these notifications to your app via a specific event, like when there's a new chat message or a system update.

2. Push methods from server to clients

If you choose push notifications, you need to decide how your server will communicate with your React app. Here are some commonly used methods:

• Push API: This simple but powerful method allows the server to send events to the client whenever there's new data.
• SSE (Server-Sent Events): SSE is a web standard that allows servers to send event-driven updates to the web browser. It keeps a single connection open for all updates.
• WebSockets: Unlike SSE, WebSockets allow for two-way communication between the server and the client. This method is useful for more interactive applications where the client might also send data to the server in realtime.

3. Displaying notifications to end users

After you've decided on the source and push method, the next step is deciding how these notifications will be displayed:

• Notifications API for browser notifications: If you want system-native notifications, you can use the Notifications API to show alerts even when the user is not actively using your app.
• In-app Toast notifications for React: Libraries like react-toastify can be useful if you prefer in-app notifications. These are less invasive and show up within the app's user interface.

4. Expanding user notifications to additional channels

Expanding a notification system is not straightforward. There are different forms of notifications, like web push, mobile push, SMS, and email, each with its own set of challenges. The more complex your system, the harder it becomes to maintain and add additional channels.

The hidden costs of custom builds

As well as having to consider the factors outlined above, building your own React notification system will incur costs that you may not have accounted for. These tend to fall into the following categories:

1. Upfront development costs

The initial investment involved in creating a custom React notification system includes costs associated with planning, development, and testing costs – making it a resource-intensive phase.

For example, if you add notifications to your social media app, you need to plan for server capacity to handle the realtime requirements. You should also integrate these notifications with your existing user authentication protocols for secure and personalized alerts. Adding a feature to track how users interact with these notifications in your analytics dashboard could be beneficial. Integrating machine learning algorithms to personalize notification content could enhance user engagement. Each element requires careful planning and dedicated resources, emphasizing the importance of budgeting for these specifics.

2. Maintenance and scaling costs

As your app grows, so will the costs associated with maintaining and upgrading your notification system.

For example, to scale and maintain notifications within a social media app, you must account for elements such as upgrading server infrastructure to accommodate an influx of new users and the associated downtime for those upgrades, which could temporarily disable services.

You also need to plan for the implementation of secure user authentication methods and develop a robust analytics dashboard for tracking user engagement. You may choose to integrate machine learning algorithms to personalize user experiences. Each of these aspects necessitates its own set of resources and planning.

3. Missed opportunity costs

The time spent building and maintaining your system could be used on other profit-generating activities.

4. Costs of inadequate functionality

If your custom system lacks expected features like user segmentation, push notifications, or analytics, you might need to redo or update it, adding to the costs.

Deciding between a custom and off-the-shelf React notification system is significant. Both options have their own sets of pros and cons that need careful consideration.

So now, let’s turn to evaluating your options for an off-the-shelf solution.

Alternatives to Push API for notifications

Off-the-shelf notification solutions can be a great alternative to building a custom solution. They are designed to solve common problems, like sending notifications in a React app.

Let's explore some of the popular off-the-shelf notification solutions that can be effective alternatives to using the Push API for notifications in a React app.

Popular off-the-shelf notification solutions

1. Firebase Cloud Messaging (FCM)

Firebase Cloud Messaging, or FCM, is a service by Google that allows you to send notifications to Android and iOS devices. It is widely used and known for its reliability and scalability. It's also free up to a specific limit, making it an attractive option for startups and small businesses.

However, it's important to note that using FCM means you're locked into the Google ecosystem. This could make it difficult and costly to switch to another service in the future, limiting your flexibility as your app grows.

2. OneSignal

OneSignal is another popular choice for React developers. It offers a wide range of features, including A/B testing and localization of messages. OneSignal is known for its ease of use and can handle many messages without sweat.

It is important to note that OneSignal can be quite pricey compared to other alternatives. Customer support is only available in English, which may limit its utility for non-English speaking users. Monitoring performance might also be challenging for newcomers to the platform.

3. Pusher

Pusher specializes in realtime WebSockets and offers a straightforward way to integrate realtime features into your React app. It's a reliable choice for apps that need to send notifications based on realtime events.

It is important to consider some of its limitations. Pusher doesn't provide quality service guarantees, meaning messages may not be delivered if a client is briefly disconnected. It also lacks integration with other services like Kafka or AWS Lambda, potentially making it less versatile. Finally, you're required to choose a single data center for your app, which could impact performance and reliability for users who are far from that location.

4. Twilio

Twilio is more than just a notification service; it offers various communication APIs, such as SMS and voice calls. Twilio is a good fit if you need multiple communication channels in your React app.

There are some drawbacks to be aware of. It lacks certain chat features like group chats and mentions. It also stores all chat data on its servers, raising data governance issues.

In addition, Twilio is limited to a single data center, affecting performance and requiring additional services for more complex realtime features, increasing costs.

5. Sendbird

Sendbird focuses on in-app messaging but also offers push notifications. It's designed to be highly customizable and can be a great fit if you want to offer your users a more interactive experience.

Sendbird has limitations to consider. Sendbird is limited to chat-centric functions, making it less suitable if you need to integrate other realtime features, thus increasing project complexity and cost. The pricing model isn't transparent when exceeding the allowed number of MAUs and peak connections, making it challenging to predict costs.

Also, while they operate multiple data centers, you can only choose one, impacting performance and availability. Furthermore, they offer limited client SDKs and lack pre-built integrations, affecting flexibility in development.

6. Ably

Ably offers a realtime messaging and data delivery platform. It's unique in that it can provide low latency messaging globally, making it ideal for apps that require fast, reliable notifications. Additionally, Ably provides a 99.999% uptime SLA so that you can trust the reliability and availability of your messaging system. This level of assurance frees you to focus on other important aspects of your application.

How to choose an off-the-shelf notification solution

When choosing between these off-the-shelf solutions, consider the following:

1. Reliability: How dependable is the service? Does it deliver messages on time?
2. Scalability: Can the service handle your user base as it grows?
3. Feature set: Does it have all the needed features, like targeting specific user segments or A/B testing?

These criteria will help you decide based on your specific needs.

Let's use Firebase Cloud Messaging (FCM) as an example to walk through how you could apply this:

1. Reliability: FCM is backed by Google and is known for its reliable and prompt message delivery. If timely notifications are crucial for your app, then FCM scores high in this area.

2. Scalability: FCM is designed to scale with your user base, making it suitable for small and larger businesses. If you plan to grow your app, you won't have to worry about outgrowing the service.

3. Feature Set: FCM offers a rich feature set that targets specific user segments and A/B testing. This allows you to fine-tune your notifications for maximum impact. However, it's important to note that using FCM locks you into the Google ecosystem, which could limit your flexibility to switch services in the future.

By examining FCM based on these criteria, you can get a clearer idea of whether it meets your app's specific reliability, scalability, and feature needs.

Comparing off-the-shelf to custom notification solutions

In a nutshell, off-the-shelf notification solutions like FCM, OneSignal, and Pusher come pre-built with features such as push notifications, in-app messaging, user segmentation, and analytics. They are ready to deploy, which means you can get your notification system up and running in a shorter amount of time. On the other hand, custom solutions offer greater flexibility and control but require more time and resources to build and maintain.

How off-the-shelf solutions differ from custom built systems

The difference between off-the-shelf solutions and custom-built systems is how they're made and used. With a custom-built system, you start from zero and build precisely what you need. This takes time, money, and expertise.

On the other hand, off-the-shelf solutions are like buying a cake mix instead of buying the ingredients and baking from scratch. You might not get to choose every ingredient, but you can start cooking immediately

Pros of using an off-the-shelf solution

1. Advanced functionality

Off-the-shelf solutions come packed with many advanced features right from the start. Whether analytics, easy-to-use dashboards, or user segmentation, you get more bang for your buck. For example, OneSignal offers user tagging and segmenting based on user activity and location.

2. Customization

Even though they are pre-built, many off-the-shelf solutions offer a good level of customization. You can often tailor the look, feel, and behavior of notifications to fit the needs of your React app. For example, Firebase Cloud Messaging (FCM) lets you customize the style and content of your notifications so they align with your app's brand.

3. Performance, scalability, reliability

Most off-the-shelf solutions are designed by experts for optimized performance, high reliability, and scalability. They can handle a growing user base without requiring you to reinvent the wheel. For example, Ably offers a 99.999% uptime guarantee and can manage millions of concurrent connections.

However, it's worth noting that not all solutions offer the same level of scalability. Some solutions may need help to maintain performance as the user base grows, so it's important to research and choose a provider that fits your specific needs.

4. Extend to native notificaions

Solutions such as Pusher and OneSignal allow you to manage web notifications and extend these to native mobile apps. This is especially useful if you're planning to expand your React web app into a mobile application.

Cons of using an off-the-shelf solution

1. Third-party vs. native browser APIs

When you use an off-the-shelf solution, you are bound to their APIs instead of native browser APIs. For instance, using OneSignal, you'll use OneSignal's API to send notifications rather than the native browser methods. This restriction can result in limited access to browser-specific features for notifications. However, it's worth noting that some off-the-shelf solutions do provide wrappers around native APIs to offer more flexibility.

2. Offline limitations

Most off-the-shelf solutions require an active internet connection to function fully. This is a drawback if your React app needs to support offline notifications. The ability to manage notifications while offline may require a custom-built system.

3. Data handling control

Off-the-shelf services might not offer the same level of control over data handling and security as custom solutions, which can be a significant concern if your React app deals with sensitive information.

For example, if you are building a healthcare app that stores patient medical records, a custom solution allows you to implement specific data encryption methods and other security protocols to comply with regulations like HIPAA. With an off-the-shelf solution, you may have to adapt to their pre-set security features, which might not offer the same level of control or compliance.

Key considerations when choosing between off-the-shelf and custom notification solutions

Let’s consider what you should choose if your priority is:

1. Speed of deployment: If you need to operationalize your notification system quickly, an off-the-shelf solution is likely the better choice.

2. Budget constraints: Off-the-shelf solutions often have free tiers and are generally less expensive in the short term. Custom solutions require a larger initial investment for development.

3. Unique requirements: A custom solution would be more appropriate if your React app has very specific or unique notification needs such as industry-specific compliance standards, custom data encryption, or complex workflows that require multi-step notifications.

4. Scaling: Off-the-shelf solutions like FCM and Ably are built for scalability. Custom solutions may offer more control but can fail to scale if not done by experts. Therefore, in most cases, pre-built services are the safer bet.

5. Data sensitivity: A custom-built system provides more control over data and how it's handled for apps dealing with sensitive information. For example, a custom-built system will offer better control over data security and privacy if you're building a healthcare app where patient data must be strictly controlled for compliance reasons.

Each approach has its own set of advantages and disadvantages. The right choice depends on your project requirements, time, and budget.

Why Ably is a great option for adding notifications in React apps

Choosing Ably as your React notification system provider gives you a reliable, scalable, and feature-rich experience, making it an excellent option for new and established projects.

Feature-rich experience

The Ably platform provides Pub/Sub APIs enriched with advanced capabilities, such as message delta compression, multi protocol support, and automatic reconnections with message continuity. This makes it suitable to a range of realtime applications.

It operates through a globally distributed network of data centers and edge acceleration points. Its client SDKs are compatible with every major programming language and platform.

Reliability and scalability

Ably ensures 99.999% uptime SLA, backed by a global presence across regions and data centers, extensive DoS protection, and realtime messaging fabric. Ably is committed to providing a service engineered around its Four Pillars of Dependability, to ensure 100% uptime. You can see details of its performance on the service status page.

Any service interruptions are transparently reported on our service status page to keep you informed. Read more about our commitment to uptime and reliability.

Ease of integration and getting started

Opting for Ably ensures a smooth and straightforward integration process. Designed to be compatible with various platforms, including React apps, Ably saves you significant development time. Its versatility and ease of use mean you can have a fully functioning notification system with just a few lines of code, allowing you to focus on other aspects of your application.

See the full list of available integrations.

To get started, refer to the official push notification documentation for a step-by-step guide to setting up your notification system.