Sending push notifications

This post is part of a series, where I document my experiences learning React Native while building my first-ever mobile app. This is also my way of giving back to the React Native community, with tips and insights I note along the journey.

Push notifications are a great tool to engage users with your app. For instance, in our app, we’d like to send them a push notification every time we add a new list in the system. In this post we’ll see how to do this. Spoiler: it’s pretty easy!

Before we start

Second, we’ll also need a running server with a public IP address. In this post, I’ll be using AWS Lambda for this. More specifically, I’ll be using the Node.js starter template from our trusted serverless guide. You can feel free to use whatever alternative you feel more comfortable in. In fact, one great option to use during development is setting up ngrok to expose a tunnel from localhost. Either way, I don’t plan to cover the backend implementation here, as it’s quite a bit out of scope.

Finally, we assume that the user has given our app permissions to receive push notifications. We covered asking for permissions earlier when we discussed getting geolocation information, so code below should seem quite familiar:

Source: https://docs.expo.io/versions/latest/guides/push-notifications/

OK, now that we have these out of the way, let’s get to the juicy details!

Step 1: send the Expo Push Token to your server

Source: https://docs.expo.io/versions/latest/guides/push-notifications/

We’ll actually do this is in the registerForPushNotificationsAsync method:

Source: https://docs.expo.io/versions/latest/guides/push-notifications/

We’re now ready to send notifications from our backend server!

Step 2: use the Expo Push Token to send a notification

The following diagram shows the lifecycle of a push notification using Expo:

Source: https://docs.expo.io/versions/latest/guides/push-notifications/

There are libraries for most popular backend languages that take care of this (e.g. Node.js, Ruby, python, Rust, Go, Elixir) — the official docs have links to all of these. However, in our example, we’ll use plain-old, handcrafted HTTP requests directly to the Expo backend. To do this we need to send a POST request to https://exp.host/--/api/v2/push/send with these headers:

Content-Type: application/json
Accept: application/json
Accept-Encoding: gzip, deflate

The body of your request needs to include the Expo Push Token, a title, and a body, as shown in the example below:

During development, you can even use the Expo push notification tool, which allows you to send push notifications from a web page. Super useful!

The API call actually returns an array of push tickets. Each push ticket indicates whether Expo successfully received the notification and, when successful, a receipt ID. As the documentation points out, the fact that Expo successfully received the notification doesn’t mean that the notification will be delivered nor that the device has received the message. It just means that “I received your notification and I’ve enqueued for delivery”.

Finally, we can then use those receipt IDs to query the iOS or the Android push notification service about the status of those requests. The Expo docs have more details about this, which are worth checking out.

OK, great — we’re able to send push notifications to devices that we have in our system. Now, let’s ensure that our app is listening for those notifications.

Step 3: listen for notifications in your app

If we want to be good citizens, it’s best if we remove the listener in the componentWillUnmount lifecycle method by calling the remove() function on the notificationSubscription object.

Final notes

If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.

About me

Co-founder & CTO @ AgentRisk. Former infra-tech guy (storage, networks). Startup nerd. Always building cool side-projects. #LongLA

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store