All Collections
Push Notifications
Web
How do Web Push notifications work?
How do Web Push notifications work?

Everything you wanted to know about web push notifications and we browsers but were afraid to ask.

Baptiste avatar
Written by Baptiste
Updated over a week ago

Batch supports sending push notifications directly to web browsers, on desktop and mobile, even if your website is closed.

Batch relies on two different technologies to deliver push notifications to the browser of your users, on desktop or mobile:

  • The Push API W3C standard

  • Service Workers

Any browsers implementing both technologies will be compatible with our Web SDK and will be able to receive push notifications: Google Chrome, Mozilla Firefox and any Chromium-based browsers (Microsoft Edge, Opera, Vivaldi, etc).

Understanding How Batch Works

Integrating Batch into your website is simple. You must:

  1. Upload Batch's service worker to the root of your website

  2. Add Batch's javascript tag to the code of your web pages

Your integration is attached to an app on Batch's side thanks to the "API key" specified in the javascript tag the dashboard automatically generates for you.

On the first session, the javascript tag will start and Batch will register a new install. For every new install, Batch generates an anonymous "installation ID". 

All the data collected from the website until users clear site data will be attached to that "installation ID":

Collecting a Token

In order to send a push notification to a device, Batch needs to collect an endpoint. That endpoint is anonymous and delivered by the servers of each browser (e.g. Google, Mozilla, etc).

Here is how Batch collects an endpoint and generates a token:

  1. The javascript tag triggers the native permission prompt.

  2. If users turn on push notifications, the browser requests an endpoint to the push notification service.

  3. The push notification service then generates a public endpoint and sends it to the browser.

  4. Batch service worker collects that endpoint and the javascript tag sends it to Batch servers.

Batch servers store that endpoint for the installation and generate a "token". That token contains:

  • An endpoint: the anonymous id generated by the push notification service for the browser (endpoint)

  • The public key of the user's browser that allows it to decode the notification Batch will send (p256dh). The browser of every subscriber has a different public key.

  • A secret key (auth).

Here is what a token looks like:

{

"endpoint": "https://fcm.googleapis.com/fcm/send/f1JDSGNXoZM:APD91bFRRV4I-WCFDcEmSNGYii_7MyzG8gVgP0bYWGknKoNEmPkuDpUdkAKqb6O0Dr0xTO_2xDXqDnp4quk7iL_5PK3-J22RPrT-9Hsb4c_G4SBxNHqPX7Do5VHvNAm_SOk_foHGtA5u",

"keys": {

"p256dh": "BC2bogMsUCbFwomx4l1gXD984UYeNrz5qh3x_pHCt-UKfNFNaJp6xoQQo7MYqi_aglI780qcraGSut1CvRs67NI",

"auth": "RFKT6wLk1X5lPwsMTOyKcA"

}

}

Sending a Push Notification

Here is how Batch sends push notifications to your users:

  1. First, Batch encodes the content of the notification for every subscribed browser, based on the public key. The message sent from Batch can only be decoded by your user's browser.

  2. Batch servers send the notification over HTTPS to the push notification service, signing the requests using a "private VAPID key" known exclusively by Batch.

  3. Then the push notification service only reads the header to know which endpoint should be targeted. It cannot decode the message. The push notification service will also check if Batch is allowed to push that browser based on the private VAPID key and check if the endpoint is still valid (e.g. in case users cleared site data or uninstalled the browser). 

  4. Finally, the browser receives the push notification. Batch service worker decodes it and displays it.

Batch uses the feedback received from the push service to delete tokens that may be invalid in your userbase. Batch Service Worker will also send feedback to Batch servers when users click the notification. You can find both information in your campaign reports.


This article belongs to Batch's FAQ. Need more help? Find insightful articles, documentation, case & market studies, guides, and even more in our website's Resources section on batch.com and our blog.

Did this answer your question?