How to send web push notifications to a group of users

Sometimes it is useful to send a notification from your website to multiple users. Let's see how to achieve that.

Unfortunately the Web Push standard doesn't allow to send the same notification to multiple users with a single call: you will need to make a separate HTTP request for each user that you want to reach. For example, if you want to send a notification to a group that has 100 users, you will need to make 100 HTTP requests.

However there is an alternative: you can use a service for web push notifications like Pushpad, which adds a new layer of abstraction and allows to send a notification to multiple users with a single API call.

Your application makes a single API call (HTTP request) to Pushpad, and then Pushpad manages all the deliveries for you. If you use Pushpad, a single HTTP request can deliver a notification to hundreds, thousands or even millions of users.

It is extremely easy to target a group of users (or target only some users based on specific conditions). In particular there are two alternatives.

The following examples assume that you already know how to subscribe the users to notifications.

Solution 1: Send a notification to a group of users by listing their user IDs

For each user, you need to assign a user ID to the browser using the Pushpad JavaScript SDK:

pushpad('uid', 'user1', 'cryptographic signature');

Basically you are setting a "name" or "alias" for that specific browser, so that you can send notifications to it later. There is also a signature that serves as user authentication and prevents malicious users from setting arbitrary values.

Then you can easily send a notification to multiple users using the REST API or the libraries. For example:

curl -H 'Authorization: Token token="AUTH_TOKEN"' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -X POST 'https://pushpad.xyz/api/v1/projects/PROJECT_ID/notifications' \
  -d '{
    "notification": {
      "title": "Web Notification Example",
      "body": "Hello world!",
      "target_url": "https://example.com"
    },
    "uids": ["user1", "user2", "user3", "user4", "user5"]
  }'

Note the "uids" field, which lists all the recipients of the notification. You can list thousands of users in a single API call.

Solution 2: Send a notification to a group of users using tags

For each user, you need to assign some tags to the browser using the Pushpad JavaScript SDK:

pushpad('tags', ['tag1', 'tag2']);

Basically you are adding some "labels" to that specific browser. Usually you will also add the same tags to other browsers that are in the same group. In this way it will be easy to reach all the browsers that have a given tag.

Then you can easily send a notification to multiple users using the REST API or the libraries. For example:

curl -H 'Authorization: Token token="AUTH_TOKEN"' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -X POST 'https://pushpad.xyz/api/v1/projects/PROJECT_ID/notifications' \
  -d '{
    "notification": {
      "title": "Web Notification Example",
      "body": "Hello world!",
      "target_url": "https://example.com"
    },
    "tags": ["tag1"]
  }'

Note the "tags" field, which lists the tags that browsers must have in order to receive the notification. All the users that have that specific tag will be reached by the notification. Using tags you can reach many users with a single API call.