02-Quickstart-Push-Notification.mdx

id	title	hide_title	slug	displayed_sidebar	sidebar_position	image
docs-notifications-quickstart	Quickstart	false	./quickstart	pushNotificationSidebar	2	/assets/docs/previews/docs_notifications--quickstart.png

Quickstart

Everything you will need to get up and running in 2 mins or less!

<title>Quickstart | Push Notification | Push Documentation</title>

import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem";

Installation

# Install Libraries
npm install @pushprotocol/restapi@latest ethers@^5.7

# Install Libraries
npm install @pushprotocol/restapi@latest ethers@^5.7

# Install Libraries
npm install @pushprotocol/restapi@latest ethers@^5.7

Import libraries

// Import restapi for function calls
import { PushAPI, CONSTANTS } from "@pushprotocol/restapi";

// Ethers or Viem, both are supported
import { ethers } from "ethers";

<TabItem value="react" attributes={{className: "codetab react"}} default>

// Import restapi for function calls
import { PushAPI, CONSTANTS } from "@pushprotocol/restapi";

// Ethers or Viem, both are supported
import { ethers } from "ethers";

<TabItem value="reactnative" attributes={{className: "codetab reactnative"}} default>

// Import restapi for function calls
import { PushAPI, CONSTANTS } from "@pushprotocol/restapi";

// Ethers or Viem, both are supported
import { ethers } from "ethers";

Initialize User

// Creating a random signer from a wallet, ideally this is the wallet you will connect
const signer = ethers.Wallet.createRandom();

// Initialize wallet user
// 'CONSTANTS.ENV.PROD' -> mainnet apps | 'CONSTANTS.ENV.STAGING' -> testnet apps
const userAlice = await PushAPI.initialize(signer, { env: CONSTANTS.ENV.STAGING });

<TabItem value="react" attributes={{className: "codetab react"}} default>

// Creating a random signer from a wallet, ideally this is the wallet you will connect
const signer = ethers.Wallet.createRandom();

// Initialize wallet user
// 'CONSTANTS.ENV.PROD' -> mainnet apps | 'CONSTANTS.ENV.STAGING' -> testnet apps
const userAlice = await PushAPI.initialize(signer, { env: CONSTANTS.ENV.STAGING });

<TabItem value="reactnative" attributes={{className: "codetab reactnative"}} default>

// Creating a random signer from a wallet, ideally this is the wallet you will connect
const signer = ethers.Wallet.createRandom();

// Initialize wallet user
// 'CONSTANTS.ENV.PROD' -> mainnet apps | 'CONSTANTS.ENV.STAGING' -> testnet apps
const userAlice = await PushAPI.initialize(signer, { env: CONSTANTS.ENV.STAGING });

Send Notification

// Requires user to have a channel, see Create Channel section for more info
// ['*'] sends to all wallets who have opted in to your channel
const response = await userAlice.channel.send(["*"], {
  notification: {
    title: "You awesome notification",
    body: "from your amazing protocol",
  },
});

<TabItem value="react" attributes={{className: "codetab react"}} default>

// Requires user to have a channel, see Create Channel section for more info
// ['*'] sends to all wallets who have opted in to your channel
const response = await userAlice.channel.send(["*"], {
  notification: {
    title: "You awesome notification",
    body: "from your amazing protocol",
  },
});

<TabItem value="reactnative" attributes={{className: "codetab reactnative"}} default>

// Requires user to have a channel, see Create Channel section for more info
// ['*'] sends to all wallets who have opted in to your channel
const response = await userAlice.channel.send(["*"], {
  notification: {
    title: "You awesome notification",
    body: "from your amazing protocol",
  },
});

Stream / Real time updates / Socket

// To listen to real time notifications
const stream = await userAlice.initStream([CONSTANTS.STREAM.NOTIF]);

// Setup event handling
stream.on(CONSTANTS.STREAM.NOTIF, (data) => {
  console.log(data);
});

// Connect stream but only after setting all event handling
stream.connect();

<TabItem value="react" attributes={{className: "codetab react"}} default>

// To listen to real time notifications
const stream = await userAlice.initStream([CONSTANTS.STREAM.NOTIF]);

// Setup event handling
stream.on(CONSTANTS.STREAM.NOTIF, (data) => {
  console.log(data);
});

// Connect stream but only after setting all event handling
stream.connect();

<TabItem value="reactnative" attributes={{className: "codetab reactnative"}} default>

// To listen to real time notifications
const stream = await userAlice.initStream([CONSTANTS.STREAM.NOTIF]);

// Setup event handling
stream.on(CONSTANTS.STREAM.NOTIF, (data) => {
  console.log(data);
});

// Connect stream but only after setting all event handling
stream.connect();