DEV Community

aryan bramhane
aryan bramhane

Posted on

Push Notification: A revolutionary move in web3 communication 🔔

Push chat and push notification

Your selection in a job interview, a message from your crush and you name it... all start with that one damm notification. In 2009 when Apple brought push notifications to iOS 3.0, It was a revolutionary move... fast forward to today, Here we are in the era of a decentralized web but it lacks some problems let's talk about the issue...

What's the problem?

Decentralized applications (Dapps), Decentralized anonymous organizations (DAOs), Decentralized Finance (DeFi and web3 protocols lack the problem of interaction with the end user, there is no permanent solution to send the notification to the end user about the updates all they can do is a post on Twitter (X), make a post on discord chat but it is not catering the audience that is not sufficient.

Hmm... the problem looks real... Any solution on this?

Introducing Push Notification (Prev EPNS)

Push Notification is a web3 protocol that is used to send notifications to the end user, It is the first protocol in web3 space to send to introduce to the notification feature. Some of the leading protocols that use the push notification we call frens of push.

push ecosystem

Deep Dive into Push Notification

I know this technology is interesting and you all want to have a deep dive into how to use it in your next dapp? Before having a deep dive on the push notification let's understand some basic terms.

Channels: Any service i.e. Dapp, Defi, or even a web2 protocol that wants to send a notification to the web3 users can choose to become a channel and establish an adequate communication bridge with its user. Consider it as your YouTube channel and someone needs to opt-in (subscribe) to get the notification for that specific protocol. Head over to https://app.push.org/channels to see it in action.

push dashboard

Types of Notification: There are three types of notification that push provide,

  • Broadcast Notification: These are the notifications that are sent to every single user who is subscribed to your channel.
  • Targeted Notification: This is the type of notification that is sent to the specific targeted audience, maybe there are some developers out there and you are launching beta so notify the user using this targeted notification
  • Subset Notification: When you are sending a notification to a particular set of audiences then the subset notification is really helpful. Maybe you have a paid tire for one of your protocols and you want to notify the updates you can use the subset notification to do so!

Enough talk! now let’s have a hand on how to send notifications to the user.

There are four ways to send notifications to the user

  • Push dApp (Gassless)
  • Push SDK (Gassless)
  • Using smart contract
  • Using subgraph (Gassless)
  • Let’s deep dive into Push DApps and Push SDK,

Send Notification Using Push DApp

  • Head over to push staging Dapp, log in with your wallet, and make a channel.
  • After having some users in the channel head over to send notification, make sure to add enough description, title, CTA, and media and click on the send notification option. Also make sure that which type of notification you want to send is broadcast, Targeted, or Subset.

Push dashboard

  • After filling out the forms click on the send notification, and after that a metamask pop-up will appear all you have to do is sign a contract.
  • That’s it! You send the notification to the users. As simple as that.
    Send Notification using Push SDK

    • To get started we need to libraries to ethers and @pushprotocol/restapi@latest one thing to keep in mind is that, use proper version of ether at the moment (writing the blog) the push SDK support ethers of version 5.8+.
    • First of all you should have a channel where people can opt in for the notification for your particular protocol to do this head over to push staging app and create the channel.
npm install ethers@5.6.8
npm install @pushprotocol/restapi@latest
Enter fullscreen mode Exit fullscreen mode
  • After installing the dependency get your wallet private key, which should be the same wallet from which you had created the channel. Make sure, that the private key is not exposed as it can lead to compromise of the wallet.
const PK = proccess.env.METAMASK_PRIVATE_KEY; // channel private key
const Pkey = `0x${PK}`;
const _signer = new ethers.Wallet(Pkey);
Enter fullscreen mode Exit fullscreen mode
  • Let’s make a function and implement the notification we.
const sendNotification = async() => {
    try {
      const apiResponse = await PushAPI.payloads.sendNotification({
        signer: _signer,
        type: 1, // broadcast
        identityType: 2, // direct payload
        notification: {
          title: `[SDK-TEST] notification TITLE:`,
          body: `[sdk-test] notification BODY`
        },
        payload: {
          title: `[sdk-test] payload title`,
          body: `sample msg body`,
          cta: '',
          img: ''
        },
        // your channel address
        channel: 'eip155:5:0x0540d716c6d621948F5A0d33680E2969c33E66c5', // your channel address
        env: 'staging'
      });
    } catch (err) {
      console.error('Error: ', err);
    }
  }
  sendNotification()
Enter fullscreen mode Exit fullscreen mode
  • And that’s it! We implemented the Push notification using the SDK. That’s it ! as easy as that, you had implemented the push notification for your cool hackathon project your big web3 startup.

Hope you liked this blog if you have any suggestions any feedback hit me up on Twitter.

Top comments (0)