Log In
Sign Up

How-To Send Mobile & Web Push Notifications with Nodejs

Push notifications are an excellent way to connect and engage with users, giving you the ability to communicate with them even when they are not currently on your site or app. Having users interact with your product when they are away from it can drive customer retention up. Using push notifications to relay useful and crucial information instantly can also boost user experience.

It’s important to design captivating push notifications that will appeal to your users and entice them to head to your app or site. While many developers opt to build and configure a server to work with push providers to send out these notifications, this can be time-consuming and complicated, can involve a significant amount of work, and can require constant maintenance and upkeep. You have to design and code notification templates on editors, manage authentication for push requests, handle logging, figure out analytics, set up rules and conditions for when they should go out, and more.

Enter Courier, a notification system you can use to simplify your server app setup and reduce the amount of work you need to do to get your push notifications up and running.

In this article, we’ll cover basic information on mobile, web, and multichannel push notifications, and teach you to send them using Node.js and Courier.

What Are Push Notifications

First and foremost, before we delve into the details of sending push notifications out, it’s important to understand what they are. A push notification is a message sent from a remote server to an app or website on a mobile phone, browser, computer, or a device, such as a smart TV, set-top box, or smart home device. The user does not need to have the app or website open on their device to receive a push notification. On mobile devices or smart devices, they typically appear as a banner on the lock screen or in the notification center. On browsers, computers, or other devices, they generally appear on the top left or bottom left of the screen.

When a user receives a push notification, they can tap on the notification to launch the corresponding app or site for more information. On most devices, apps and websites typically have to receive permission from a user before sending push notifications, so users must opt in to specify that they’d like to receive these notifications.

Push notifications can be used in several different ways. Many apps and sites use them to provide general information to users. For example, if an app is adding a new or important feature, it could send out a notification to alert users of the change.

Push notifications can also be essential for marketing. A shopping app, for instance, can send users a push notification when deals and discounts are available or when a sale is running. They can also be sent out in response to a user’s action. For example, an app can send out a notification to a user to check for fraudulent account activity if they have logged in on a new device.

Push notifications can be sent in response to events. When check-in opens for a flight, an airline customer app might send them a reminder to check in. Apps may also send out push notifications based on a devices’ location. For instance, consider a taxi app that will send a push notification to a passenger when the vehicle is approaching its pickup point.

Apps and sites may also use push notifications to solicit action from users. An app, for example, can ask a user to rate an item or a service they received on the app (such as a taxi passenger rating their ride). Ratings can be useful in evaluating a business’s products and furthering awareness of your brand.

Whatever the specific use case, having the ability to send notifications to users on different platforms and through multiple mediums can make your messaging more effective. By giving your users a choice of mediums to reach them, you can tailor your message to their preferences and boost their experience on your app or site. This, in turn, improves user retention and conversion and contributes positively to your brand.

You may choose to reach users through email, push notifications, SMS, or direct messaging. Or you may opt for a multichannel approach by sending related messages to your users across a combination of these mediums. A channel, in this case, is a type of notification, like the four mentioned earlier. Using multichannel push notifications allows you to send related notifications to users on different platforms or services. For example, if a company uses multiple services to track and communicate the status of their site, they could send push notifications to an on-call service, like PagerDuty, to a work messaging service, like Slack, and to a monitoring service, like Datadog, when something goes wrong. This way, they can reach developers responsible for fixing the issue using different kinds of channels.

In the following tutorial, you will learn more about sending mobile and web push notifications and then explore step-by-step instructions for how to create multichannel notifications, integrate services that will receive them using Courier’s notification service, and dispatch the notifications from a Node.js app using Courier’s API.

Sending Mobile Push Notifications with Node.js

Before sending out any push notification, you’ll need to pick a push service, like Firebase Cloud Messaging (FCM) or Amazon Simple Notification Service (Amazon SNS), that will dispatch the notifications you create to your app or site.

Next, you’ll have to configure your app to receive push notifications. If you’re using an existing third-party app that can already receive push notifications, such as an on-call app, this is not something you’d have to worry about. Using a notification system, like Courier, you’d integrate a push service or the service behind your third-party app.

Once you’ve integrated your service, you’ll design and create a notification and set up rules or conditions for when it should go out. Lastly, you’ll build a Node.js app that will make an API call to the notification system to dispatch the notification.

The Node.js app makes this API request with the relevant data to include in the notification as well as information about the recipient. When the notification system receives this request, it adds the data to the notification template. It then makes a request containing the notification, recipient information, and other delivery details to a push service or a third-party service (which, in turn, sends it to a push service). Once the push service receives the request, it sends the notification to the mobile device, assuming it’s online, through APN for iOS and the Android transport layer for Android. If the device is offline, the notification will be held until the device comes back online or until the notification expires, in which case, it may be discarded.

Once the notification is delivered to the mobile device OS or the app, the user is alerted with a vibration or sound. The notification is then displayed in the notification center, as a banner, or on the lock screen of the device.

Sending Web Push Notifications with Node.js

Dispatching notifications to websites with Node.js works similar to what has been described earlier for mobile devices. The difference is that instead of a mobile device, the push notification is delivered to a web browser. If the device is offline, the push service keeps the notification until the device comes back online and is able to send it. When the browser gets the notification, it sends a push event with the notification in a service worker and displays it. The visual for push notifications on browsers and desktop apps varies widely, but your website does not need to be open for it to be displayed.

Sending Multichannel Push Notifications with Node.js and Courier

Now, let’s dive into the details of setting up multichannel push notifications. Before you can proceed with the tutorial, there are a few prerequisites. You’ll need:

  1. A Courier account.
  2. A Node.js installation for your specific OS.
  3. A Pushbullet account, which we’ll use in the tutorial to demonstrate how to send Android and web push notifications. To create an account, install the Pushbullet app on an Android device and set up Pushbullet on your desktop browser.
  4. An Airship account, which we’ll use to show you how to send push notifications on iOS. You’ll need to install the 1st Flight app on an iOS device. Once you’ve logged in, set a username under Named User in the Settings of the app. You’ll use this username later on to send a notification.

Both Airship and Pushbullet are integrations that Courier supports. There are several other integrations that Courier can work with to send push notifications, like FCM and Amazon SNS. You can find a full list of them in Courier’s documentation.

Once you’ve met all these prerequisites, you can design the notification and build the Node.js app to send it. Let’s get started.

Step 1: Add Integrations

Head on over to the Courier Integrations page. Here, you will set up the Pushbullet and Airship integrations. You can add Airship credentials here and Pushbullet credentials here. The Airship bearer token is created in the settings of your Airship project as described in this guide. You can get a Pushbullet access token from your account settings linked here.

Step 2: Design a Notification

Next, you’ll need to create a notification using Courier’s Notification Designer. This guide on the Courier Help Center will show you how to create one. You’ll need to select Push for a notifications channel type and either Airship or Pushbullet as an integration. Once you’ve added content for your notification and previewed it, be sure to publish it.

Step 3: Create an Event

Then you’ll need to create an event, a unique identifier mapped to each notification. It can be anything you choose. On the Events page in your account settings, click on Create New Events. Add an event ID and pick the notification you created in step 2. For this tutorial, you can use courier-test-event as your event ID.

Step 4: Scaffold Your Node.js Project

Now that you’ve added your integrations and created a notification, you can start building the Node.js app to dispatch it. Begin by creating a folder for the project. You can call it courier-push-notifications. After creating the folder, change directories to it:

1 mkdir courier-push-notifications && cd courier-push-notifications

Next, you’ll create the app file where you’ll place the code to send the notification:

1 touch index.js

Initialize npm to create a package.json file to track dependencies and specify settings, like the type of the project:

1 npm init -y

Afterward, change the type of the project to module in the package.json file by adding this line to it:

1 "type": "module",

Step 5: Add Dependencies

You’re going to use the Courier Node.js module to send the notification. To install it, run this command:

1 npm install @trycourier/courier

Step 6: Build the App

Open the index.js file in your preferred editor. In this file, add the code below:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import { CourierClient } from "@trycourier/courier"; const courierCL = CourierClient({ authorizationToken: process.env.COURIER_AUTH_TOKEN }); const {messageId} = await courierCL.send({ eventId: "courier-test-event", recipientId: "<RECIPIENT_ID>", profile: { airship: audience: { named_user: "<NAMED_USER_ID>", } } } });

To start, you will import CourierClient and then initialize a new client using a Courier Auth Token. You can get the COURIER_AUTH_TOKEN from the settings of the notification you created under General Settings.

Once courierCL is initialized, you will use it to send a notification with its send method. This method takes an object containing notification and recipient data. The eventId is the ID of the event you created in step 3. In this case, you named it courier-test-event. The recipientId is an ID you provide to identify your user. It can be any ID, as long as it uniquely identifies the user you are sending the notification to. The profile provides additional information about the recipient for an integration or channel. Remember that Airship requires a named_user ID to be provided in order to send a push notification; you already set this up in the prerequisites earlier. For Pushbullet, you can omit this.

After the process completes, a messageId is returned.

Step 7: Send the Notification

Now that the app is complete and you have added all the necessary information, you can send your notification. Do so by running this:

1 COURIER_AUTH_TOKEN=<auth-token> node index.js

Be sure to replace <auth-token> with the notification Auth Token mentioned in step 6. Once complete, you should see a push notification in just a few seconds on an Android device or web browser with Pushbullet, or on an iOS device with Airship. You can also check out log details for the sent notification using Courier’s data logs.

Conclusion

Push notifications are essential for directly connecting with users of your site or app. They give the user crucial and timely information that is applicable for a variety of use cases, including marketing, location and event-based messaging, soliciting of a user action, and provision of general information.

Multichannel push notifications can be sent through different mediums and to different platforms. For example, a single push notification can be sent to multiple apps on mobile devices and sites on a web browser all at once. Using the Courier notification system and its Node.js library, you can send multichannel notifications with minimal effort. In this tutorial, you learned how to add integrations, create a Courier notification, connect it to an integration, and make an event. You then built a Node.js app using Courier’s Node.js library and sent the notification to apps on iOS and Android, as well as a web browser.

Courier is a notification system with admin and analytic tools that make life easier, even when you aren’t sending to multiple channels. With it comes an array of benefits:

  • It provides a user-friendly Notification Designer to create and brand notifications.
  • It allows you to integrate various push and third-party service providers to send notifications on four channels: SMS, email, push, and direct messaging.
  • With its rules delivery engine, you can set preferences and rules for how notifications are sent on different channels and integrations.
  • Using its data logs, you can see how your notifications are being received and are performing. The logs give you insights into how your users are interacting with your notifications and metrics on how they’re being delivered.
  • Most importantly, it provides an API that you can use to easily dispatch multichannel notifications with minimal setup.

To learn more about what you can do with Courier and how it works, check out their Help Center. To find out what other integrations it supports and how to send push notifications with libraries in other languages, head on over to their documentation page.

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Email & push notification

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Email & push notification

Product

© 2021 Courier. All rights reserved.