Overview

Add browser push notifications with PushNotificationProvider and usePushNotifications.

BuildBase provides browser push notifications out of the box. Wrap your app in PushNotificationProvider, then use usePushNotifications() to manage permission and subscription state.

import { PushNotificationProvider } from '@buildbase/sdk/react';

function App() {
  return (
    <PushNotificationProvider>
      <Dashboard />
    </PushNotificationProvider>
  );
}

import { usePushNotifications } from '@buildbase/sdk/react';

function NotificationBell() {
  const {
    permission,
    isSubscribed,
    requestPermission,
    subscribe,
    unsubscribe,
  } = usePushNotifications();

  if (permission === 'denied') return <p>Notifications blocked.</p>;

  if (!isSubscribed) {
    return (
      <button
        onClick={async () => {
          await requestPermission();
          await subscribe();
        }}
      >
        Enable notifications
      </button>
    );
  }

  return <button onClick={unsubscribe}>Disable notifications</button>;
}

PushNotificationProvider props

Prop	Type	Default	Description
`serviceWorkerPath`	`string`	`'/push-sw.js'`	Path to the push service worker
`autoSubscribe`	`boolean`	`false`	Auto-subscribe after permission granted

usePushNotifications() returns

Return	Type	Description
`permission`	`'default'` / `'granted'` / `'denied'`	Browser notification permission
`isSubscribed`	`boolean`	Whether the device is subscribed
`isSupported`	`boolean`	Whether the browser supports push
`loading`	`boolean`	Loading state
`requestPermission()`	`function`	Request notification permission
`subscribe()`	`function`	Subscribe to push notifications
`unsubscribe()`	`function`	Unsubscribe

Sending notifications (server-side)

Use the server SDK to send notifications to users:

import BuildBase from '@buildbase/sdk';

const bb = BuildBase({ serverUrl, orgId, getSessionId });

// Send to a specific user
await bb.notification.send(workspaceId, 'comment-added', userId, {
  title: 'New comment',
  message: 'Someone commented on your post.',
  url: '/posts/123',
});

// Send to all workspace members
await bb.notification.send(workspaceId, 'new-release');

Next Steps

Webhooks — React to events server-side.
Server SDK — All server methods including notifications.