Notifications

Enable in-app notifications for your application’s users.

Syntax

$ vela enable notifications

The notifications module creates a notifications collection, a bell dropdown in the app header, and a /notifications page. Authentication must be enabled first.

What you get

• A bell in the (app) layout header with an unread count. Opening it lists the five most recent unread notifications.
• Polling every 30 seconds while the tab is visible, plus a refresh whenever the tab regains focus. New notifications also appear as toasts.
• A /notifications page listing everything for the signed-in user, with “Mark read” per item and “Mark all read”.
• A notify helper in $lib/server/notifications for creating notifications from server code.

The (app) layout’s +layout.server.ts is extended to load the unread notifications and register the app:notifications dependency, so calling invalidate('app:notifications') anywhere refreshes the bell.

Sending a notification

Notifications are created server-side. Import notify in a form action, hook or API route and pass the user’s id:

import { notify } from '$lib/server/notifications';

export const actions = {
  invite: async ({ locals }) => {
    await notify(locals.admin, invitedUserId, {
      title: 'You were added to Acme',
      body: 'Open the team page to get started.'
    });
  }
};

Users can only read and delete their own notifications, and can only change the read flag. Creating a notification or editing its title and body requires the superuser client, so pass locals.admin rather than locals.pb.

Database tables

Enabling notifications creates the following database tables:

notifications

Each record holds a user relation, title, body and a read flag, indexed by user, read state and creation date.