Adding push notifications to your React project

Enhance your React app with push notifications. In this article, we'll cover the steps to integrate the Web Push API into your React project and send push notifications to your users.

Adding push notifications to your React project Logo
Large cover image for Adding push notifications to your React project

Step 1: Set up your React project

Progressier can enhance your React web app with additional features such as push notifications and the ability to be installed as a Progressive Web App (PWA). You can incorporate Progressier into your project when your app is live and accessible at a custom domain.

Step 2: Create a Progressier account

Progressier is a web toolkit that allows you to easily add new capabilities to your React app (and apps from hosting providers as well) using little to no code at all.

If you haven’t done so already, create your Progressier account. It comes with a free trial (no credit card required!) so you can test all features free of charge for 14 days without risk.

Step 3: Turn your React project into a PWA

Next, create your React app in Progressier. Go to New PWA, then select React in the first dropdown menu. Give your app a name and paste the URL of your React project in the third field.

Step 4: Complete your onboarding

Complete the tasks shown on screen to finish making your React app universally installable and augment it with push notifications. It even comes with a complete solution for designing app screenshots and gathering reviews.

Step 5: Allow push notifications on your domain

Click on the in the URL bar to open permissions. If you followed instructions correctly, notifications should be authorized on your domain.

Step 6: Send your first push notification

Our Push Composer allows you to compose a notification, select a specific group of users of your React app to send it to, and even schedule its actual delivery from 15 minutes to 14 days in the future.

Step 7: Connect your user data (optional)

Sending the same notification to every user for marketing purposes is one thing. Sending notifications programmatically to a user to react to events in your React app is another. Luckily, Progressier comes with a solution for both use cases. Simply connect your user data (e.g. a user ID or user email), then call our Push API in your server-side code to send a push notification to a specific user. You don't have to manage push subscriptions on your end.

Why add push notifications to your app?

1. Improving user engagement: Push notifications can help keep users engaged with your app by delivering timely and relevant updates and information.

2. Driving traffic to the app: Push notifications can help drive traffic back to your React app by providing users with a reason to open it.

3. Increasing retention rates: Push notifications can help keep users coming back to the app by providing them with valuable and interesting content.

4. Boosting conversion rates: By delivering personalized and targeted messages to users, push notifications can help increase conversion rates and drive sales.

5. Providing a better user experience: Push notifications can provide a more convenient way for users to receive updates and information from your app, improving the overall user experience.

The disadvantages of push notifications in React

Apple has announced that push notifications will be coming to iOS in 2023. But in the meantime, the Web Push API only works on desktop and Android, so if your web app is mobile-first, only half of your users will be able to benefit from receiving push notifications.

Use notifications with restraint as some users find them intrusive and/or annoying. Also, instead of using push notifications as a marketing tool, consider using them to provide value to your users. For example, you could use push notifications to alert users to new features or updates, or to remind them of important tasks or deadlines. This can help build trust and engagement with your users.

What are the best push services for React apps?

Here are some popular examples of push services React app owners like to use:

- Firebase Cloud Messaging (FCM): The free push messaging solution developed by Google. It's completely free to use but is fairly limited when it comes to sending personalized push notifications

- OneSignal: Probably the most popular option for push notifications. OneSignal works well across platforms and provide more options than FCM but can be quite costly, especially at scale.

- Progressier: Progressier is a PWA toolkit that allows developers and no-code makers to effortlessly send push notifications for marketing or targeted messaging purposes. It is built specifically for web apps and may not be the best option for websites or native apps.

- Amazon Simple Notification Service (SNS): that's Amazon's version of FCM designed to help developers send push notifications. Powerful but has a learning curve.

- Airship: Another tool designed to help developers and marketers engage with their users through personalized and timely messages delivered to their mobile devices. Not exclusively web-based.

- PushEngage: Another popular option for push notifications on the web.

Developing your own push notification solution

If you prefer to build your own push notification solution, this is also possible, although it will take you a lot more time and effort. I've written about the process of creating a complete push solution that can scale to 1 million users with Firebase. A push service has these components:

1. Prompts to allow push notifications: the first step is to ask users to allow notifications in their browser. There are several ways to do this, but it often involves building some custom UI

2. A database to save push subscriptions: a push subscription is essentially an API endpoint. When a user allows notifications, you need to save this endpoint in your database with additional information about the preferences of that user. This can be topics or a specific user ID or email.

3. A push composer: composer the content of the notification with a title, body and the icon of your React app. Then make a POST request to that endpoint.

4. A push queue: send the payload of the push notification to the API endpoint of a particular subscription, and they'll receive your notification.

Which platforms are compatible with push notifications?

The Web Push API is compatible with Windows (via Chrome, Edge, Firefox, Opera), macOS (Firefox, Chrome, Edge, Safari 16 on macOS Ventura), Android (Samsung Internet, Chrome, Firefox). Push notifications will also soon be available on iOS with Safari.

Your app here

Augment your React app with push notifications

Elevate your app with our no-code push notification toolkit

Get started See plans