Test Web Push Notifications
Send a test notification using the Web Push API. Ready to add Web Push to Your App? View the Web Push Provider Docs.
Web Push Notifications have a lot of moving parts. Service Workers, Vapid Keys, and Push Managers are just the tip of the iceberg. Use the button below to test if your browser is able to receive Web Push notifications. The Console below taps into some of the events the MagicBell SDK emits.
1. Enable Web Push Notifications
Our SDK automatically registers a service worker. When you click the button, your browser will ask if you want to "Allow Notifications", after which a Channel Token will be sent to MagicBell.
2. Send Notifications
Send yourself some notifications with the "Create Broadcast" button. If the button above is green, your browser should show them to you. You can disable the Web Push notifications again by clicking the button above.
Web Push Notifications That Work Everywhere!
Ready to add Web Push Notifications to your site? Using MagicBell, it's as simple as copy/pasting the snippet below.
import "@magicbell/react/styles/webpush-button.css";
import * as React from "react";
import Provider from "@magicbell/react/context-provider";
import WebPushButton from "@magicbell/react/webpush-button";
function App(props: any) {
return (
<Provider token="${USER_JWT}">
<WebPushButton
renderLabel={({ status, error }) =>
error || (status === "success" ? "disable" : "enable")
}
/>
</Provider>
);
}
export default App;
Web Push Notifications, Explained
A collection of blog posts to help you master Web Push notifications and integrations.