Get started with sending custom notifications with Web Push using Liveblocks and Next.js

Liveblocks is a realtime collaboration infrastructure for building performant collaborative experiences. Follow this guide to send custom notifications with Web Push using methods from @liveblocks/node.

Quickstart

Install Liveblocks Node
Every Liveblocks package should use the same version.
Terminal
npm install @liveblocks/node

Trigger a custom notification

Trigger a custom notification using triggerInboxNotification from a server action or route handler. In this example, a custom $fileUploaded notification is sent.

"use server";
import { Liveblocks } from "@liveblocks/node";
const liveblocks = new Liveblocks({  secret: "",});
// Call this in your app to create a custom notificationexport async function triggerCustomNotification() {  await liveblocks.triggerInboxNotification({    // The user that will receive the notification    userId: "steven@example.com",    kind: "$fileUploaded",    subjectId: "my-file",
    // Custom data for this notification    activityData: {      file: "https://example.com/my-file.zip",      status: "pending",    },  });}