This a website that tests whether the browser can receive remote notifications. It includes a checker for if the browser supports PushManager, serviceWorker, and Notification, and also can try to send a real push notification.
Web Push Notification is a technology that allows websites to send real-time messages to users even when the browser is closed. It is implemented through push services provided by browser vendors (such as FCM and APNs) and Service Workers. Users must grant permission to receive notifications, after which the website can deliver messages to the user's device via the push service, displaying alerts even if the page is not open. This mechanism is widely used in scenarios such as news subscriptions, social interactions, and marketing campaigns, effectively enhancing user engagement and message reachability.
About Frontend: Push API (MDN)
About Backend (nodejs): web-push (NPM)
First of all, make sure that the browser support all of Notification, PushManager and serviceWorker. Futhermore, it should also support VAPID for crypto. Some old browers use their private but depreacated service to handle push notification. No way to check if the browser supports that except by sending a real push notification. Details can be checked below.
| Browser | Push without Payload | Push with Payload | VAPID | Notes |
|---|---|---|---|---|
| Chrome | ✓ v42+ | ✓ v50+ | ✓ v52+ | In v51 and less, the `gcm_sender_id` is needed to get a push subscription. |
| Edge | ✓ v17+ (April 2018) | ✓ v17+ (April 2018) | ✓ v17+ (April 2018) | |
| Firefox | ✓ v44+ | ✓ v44+ | ✓ v46+ | |
| Opera | ✓ v39+ * | ✓ v39+ * | ✗ |
* Opera supports push on Android but not on desktop.
The `gcm_sender_id` is needed to get a push subscription. |
| Safari | ✓ v16+ | ✓ v16+ | ✓ v16+ | Safari 16 in macOS 13 or later |
| Samsung Internet Browser | ✓ v4.0.10-53+ | ✓ v5.0.30-40+ | ✗ | The `gcm_sender_id` is needed to get a push subscription. |
Source:web-push (NPM)
After that, make sure that you give the notifiaction permission to this website. Click local notification to see if it can notify successfully. If you're not receiving them, it could be because Focus\Silent Mode is on, or because your system isn't allowing notifications from the browser. The exact problem and its solution vary depending on the system. Please notice that only when the local notification can be sent, the push notificaiton is vaild.
Privacy mode may also block push notification to avoid leak data to push notifiaction server.
Besides, for some Blink (Chrome-Like) browsers, especailly ungoogled-chromium, the fcm compent has been removed so it has no abilities to connect to push notifications server. In this circumstance, although feature detection will show that all of those features are supported, the push notification still cannot work. Because it even cannot get a endpoint. There will be nothing updated on the history list.
The above are just the most common reasons. The actual situation may be more complex.
This project is built with Svelte and deployed on Cloudflare Workers.
- Install All the Dependencies
pnpm i- Create and Configure the Enviroment Variable.
You can use
npx web-push generate-vapid-keysto get the public key and the private key.
For remote deploying, see Environment variables For local deploying, just create the .env from the .env.example and edit it.
cp .env.example .env # create .envAfter that, you can pnpm run dev to test it locally or see SvelteKit to deploy it on Cloudflare Workers.
It may not work in older browsers because Vite compiles to ES2020 by default.