Web push notifications
Send push notifications to your website visitors' browsers, the same way you send push notifications to iOS and Android apps. Customer.io sends them directly through each browser's push service, so you don't need a third-party push provider.
How it works
Web push is a third platform of the Push channel, next to iOS and Android. A browser that a person allows to show notifications becomes a web device on their profile. You send to it with a Web Push action, which only sends to browsers, and you get the same delivery history and metrics that you use for app push. Push actions set to iOS & Android, and transactional push, only send to iOS and Android devices.
You don’t need an Apple, Firebase, or other push provider account. Customer.io generates a key pair for your workspace (the Web Push Protocol, or VAPID, keys) and sends notifications directly to each browser’s push service. Your website does three things:
- Loads the Customer.io web push plugin alongside your JavaScript source.
- Serves a small Customer.io service worker file from your own domain. The browser runs this file in the background to show notifications, even when your site isn’t open.
- Asks a signed-in visitor for permission when they click a button, like Turn on alerts. When they allow notifications, the plugin adds a web device to their profile.
To get started, set up web push, then send a web push.
Browser support
Web push works in current versions of these browsers, as long as your site uses HTTPS.
| Browser | Supported | Requirements |
|---|---|---|
| Chrome (desktop and Android) | Yes | None |
| Edge | Yes | None |
| Firefox (desktop) | Yes | None |
| Safari on macOS | Safari 16 and later on macOS 13 and later | Your site must ask for permission directly in a click. See subscribe in a click. |
| Safari on iOS and iPadOS | iOS and iPadOS 16.4 and later | The person must add your site to their Home Screen and open it from there. A normal Safari tab can’t receive web push. See iOS and iPadOS. |
When a browser can’t receive a notification, for example because it’s closed or offline, the browser’s push service holds the notification for a limited time. By default that’s one day. If your broadcast has a send deadline, the push service holds the notification until that deadline instead, up to 28 days. A notification that’s still waiting when that time runs out never arrives. If you send several notifications from the same action while a browser is offline, the person gets only the newest one.
Whether a browser can show notifications while it’s closed depends on the browser and operating system. For example, Firefox shows a held notification when it opens again, while Chrome needs to be running to show notifications.
What each browser shows
Browsers and operating systems decide how to draw a notification, so the same message looks different from one device to the next. Every browser shows your title and message. Other fields depend on the platform.
| Platform | Icon | Image | Badge | Action buttons |
|---|---|---|---|---|
| Chrome on Windows | Yes | Yes | No | Yes, up to 2 |
| Edge on Windows | Yes | Yes | No | Yes, up to 2 |
| Chrome on Android | Yes | Yes, when expanded | Yes | Yes, up to 2, when expanded |
| Chrome on macOS | Yes, as a small thumbnail | No | No | Yes, up to 2, in the notification’s More menu |
| Firefox (Windows, macOS, Linux) | Yes | No | No | Yes, up to 2, in Firefox 152 and later |
| Chrome and Chromium on Linux | Yes | No | No | Yes, up to 2 |
| Safari on macOS | No | No | No | No |
| Safari on iOS and iPadOS | No, uses the Home Screen app icon | No | No | No |
What this means for your messages:
- Put the important information in the title and message. They’re the only fields every platform shows.
- Make the main link do the most important thing. Safari doesn’t show action buttons, so people on Safari can only click the notification itself.
- Keep text short. Most platforms show one or two lines of title and a few lines of message, and cut off the rest.
- Expect the browser to label the notification. Most browsers show your site’s domain or the browser’s name on the notification, and you can’t change it.