Skip to main content

Integrating notifications overview

This section explores how to integrate notifications on your dApp, mobile app, crypto wallet or on any other frontend.

Push is an interoperable network which already have live integrations from Push Metamask snap, Unstoppable web / mobile app, Push dapp / mobile app / extension among other dapps, extensions and mobile apps. This means notifs are already received by wallets that are on those platforms as they have integrated Push protocol.

Integration process

Integrating notifications directly on your frontend is a critical component as it enables your users to have the best experience and massively improves re-engagement and Web3 UX for your protocol.

To get started, you will need to —

  • Ensure your frontend has a way for your users to opt in to your channel on your frontend.
  • Choose what notification fetching mechanism you want to integrate for notifications to your users (Pull based, Push based or bridge based) on your frontend.

Receiving notifications

Notifications can be received on your frontend using either active user interaction, also known as pull based method or showing notifications as soon as it's triggered requiring no user interaction, which is known as push based method or triggering additional logic when notification is sent to a user using bridge based method.

note

You will need to pick the best method according to your needs. Most of the time, it will be a combination of Pull and Push or all three for a more polished and re-engaging experience for your user.

Pull based method

This method enables users to see notifications when they actively interact with an object on your frontend and relies on fetching notifications using restful APIs. For example: when you click bell icon on youtube and it fetches your notifications.

Push based method

This method doesn't rely on user interaction, instead it shows users notifications as soon as the frontend receives it. This is useful particularly when a user is on your frontend and you show them notifications as they are received.

Bridge based method

This method is usually used when you want notifications to land on user's mobile home screen or through browser notification service.

Bridge based method allows triggering additional logic and are more of an extension to push based method as they enable routing to other Web2 notification services such as Firebase, Apple Push Notification Service or to telegram / twitter / or other social bots.

note

Bridge based delivery is especially useful if you want to deliver notifications to your mobile app or extension while pull based and push based mechanism works best inside your dapp or mobile app.

Pull method live implementation

Implementing pull based mechanism requires inclusion of fetch notifications API and then using your custom frontend component or UIWeb component of Push to display them.

LIVE PREVIEW

Push method live implementation

Implementing push based mechanism requires connecting to Push nodes via stream notifications API which will trigger notifications as they come. You can then use your custom frontend component or UIWeb component of Push to display them.

LIVE PREVIEW

Bridge method implementation

Bridge method is recommended when you want to do extra things when a notification is triggered to a wallet.

For example, you might want to route them to telegram bot or use Web2 notification services of Apple or Google to display it on mobile home screen (completely different process than displaying notifications inside your app) which requires following their rules. There are couple of options to implement them —

via Push delivery node

Delivery node is the recomended way to setup your mobile home screen push notifications or to connect to Push protocol notification network via your OS!!

Setup and bridge notifications via Push Delivery Node

via AWS SNS

Delivery node is a decentralized solution while AWS SNS route is centralized. It is recommended to use delivery node but you can use AWS SNS incase you prefer Web2.5 approach — Setup and implement AWS SNS