Step 1: Finalize your React project
Progressier is a tool that lets you add extra features, like PWA installation and push notifications to your React web app. When your app is ready to launch and accessible at a custom domain, you can incorporate Progressier into your project to enhance its capabilities.
Step 2: Sign up for Progressier
Progressier is an all-in-one no-code toolkit for web apps. It usually takes 5 minutes or less to integrate Progressier with React.
Create your Progressier account . Progressier comes with a 14-day free trial that allows you to integrate it into your React app risk-free. You only enter your payment information once everything is working to your liking.
Step 3: Make your React project a PWA
After signing up, you'll be prompted to enter a few details about your app, e.g. how it was built (choose React), the name of your app, and its domain.
Step 4: Finish your installation
On the next screen, you'll see a few easy tasks to complete. Click on each to display detailed instructions, and click Done to mark them as complete. Progressier automatically shields you from a number of gotchas and potential mistakes.
Step 5: Allow notifications from your domain
Now go to your own app. You should see a button at the bottom-right corner of your app. Click on it and then tap Get notifications. You should be prompted to allow notifications. Once notifications are allowed, you'll be able to notify yourself with a test notification
Step 6: Send a test notification
Go to our Push Composer (login required) to compose your first push notification. By default, it will be sent to all your subscribers, but you can target a specific group of users in the Recipients section of the Targeting tab.
Step 7: Sync your own 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.
Benefits of enhancing your web app with push capabilities
Push notifications can improve user engagement, drive traffic back to the app, increase retention rates, boost conversion rates, and provide a better overall user experience.
Drawbacks of 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 provides 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), Android (Samsung Internet, Chrome, Firefox) and iOS (Safari).
