Push Notifications

Browser push for your app, without running a push server.

Wrap your app in PushNotificationProvider and users turn on notifications from your own button or the notifications settings screen. BuildBase generates the VAPID keys on the first subscribe, stores every device, and delivers from a queue, so sending is one call from your backend.

Your app is an organization in BuildBase. Your users sign in and work inside workspaces - one per team or customer.

You set up

In the console and the SDK

  • A 'turn on notifications' button in your app
  • One call from your server when something happens
  • Campaigns to a list, written in the console

Your users get

Inside their workspace

  • Browser notifications, even when your app is closed
  • A settings screen to choose which notifications they want
  • Notifications on each device they turn them on for

Push without the plumbing

Keys, device subscriptions, delivery and expired-device cleanup are handled. You add a button and a send call.

No Keys to Manage

The keys browsers need are created for you the first time someone subscribes. There is no push service to set up.

One Button to Subscribe

Add a button that asks for permission and subscribes the device. Signing a device out stops its notifications.

Push and Email in One Call

Send a notification to one user or a whole workspace, by push and email, and each user's preferences are respected.

Rich Notifications

Title, message, image, a link to open and up to two buttons. Replace an earlier notification instead of stacking them.

Campaigns From the Console

Write a notification, pick a list and send it, then see how many devices it reached.

Safe Links

Links in notifications are checked, and a link found to be harmful stops working even after it was sent.

A button in the browser, one call on the server

subscribe() asks for permission if it needs to. notification.send() reports which channels actually went out.

components/notification-toggle.tsxTSX
'use client';

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

// Render inside <PushNotificationProvider>
export function NotificationToggle() {
  const {
    isSupported,
    permission,
    isSubscribed,
    loading,
    subscribe,
    unsubscribe,
  } = usePushNotifications();

  if (!isSupported) return null;
  if (permission === 'denied') {
    return <p>Notifications are blocked in this browser.</p>;
  }

  return (
    <button disabled={loading} onClick={isSubscribed ? unsubscribe : subscribe}>
      {isSubscribed ? 'Turn off notifications' : 'Turn on notifications'}
    </button>
  );
}
app/api/comments/route.tsTSX
import BuildBase from '@buildbase/sdk';

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

const result = await bb.notification.send(workspaceId, 'comment_added', userId, {
  title: 'New comment',
  message: 'Alice replied on "Q3 roadmap"',
  url: '/projects/42#comment-8',
  tag: 'project-42-comments',
  actions: [{ action: 'open', title: 'Open' }],
  channels: { push: true },
});

if (!result.channels.push) {
  // blocked by a gate, or the user turned push off for this event
}

Frequently Asked Questions

What people ask about Push Notifications.

Do my users see this?

Yes. They get browser notifications on the devices where they turned them on, and choose which ones they want in their settings.

Does it work in mobile apps?

It is web push only - notifications in the browser, including on phones (on iPhone, once your web app is added to the home screen). There is no native iOS or Android app push.

Do I need to set up keys?

No. The keys browsers need are created for you the first time someone subscribes.

Can I see open or click rates?

No. Campaigns show how many devices each one was delivered to, failed on or found expired.

Send your first push notification

Wrap your app in PushNotificationProvider, add a turn-on button, and call bb.notification.send() from your backend. The keys are created on the first subscribe.

7-day free trialNo credit card requiredCancel anytime