@notifi-network/notifi-web-push-service-worker

Notifi React SDK

@notifi-network/notifi-web-push-service-worker allows your PWA to subscribe to WebPush notifications

Take a look at our example implementation to see how to import and activate the worker React Example

Getting Started

Environment

• Node version >= 18 (with corresponding npm version)
• React version >= 17

If you haven't created a Notifi tenant account yet set up an account

Prerequisites

In order to enable WebPush notifications, your dapp must

• Initialize Notifi's frontend-client or notifi-react packages with standard wallet-sign auth, or using OAUTH2/OIDC.
• Allow a service worker to run in the background. This is already assumed if you're building a PWA.

Subscribing for WebPush notifications

All alerts created via the notifi-frontend-client or notifi-react packages will automatically get published here once successfully initialized below.

import { initWebPushServiceWorker } from '@notifi-network/notifi-web-push-service-worker';

  /* This is some class/object in your frontend app that is an appropriate place to start the notifications service.
     Ensure authorization via wallet-sign or OIDC flow has succeeded before calling this. Calling before will result
     in nothing happening */
export default function Home() {
  React.useEffect(() => {
    initWebPushServiceWorker()
  }, []);
}

Unsubscribing from WebPush notifications

This will disable notifications coming in for WebPush. To manage alerts and other destinations, please continue to use the full notifi-frontend-client or notifi-react packages.

function unsubscribePushManger() {
  navigator.serviceWorker.ready.then((reg) => {
    reg.pushManager.getSubscription().then((subscription) => {
      if (subscription) {
        subscription
          .unsubscribe()
          .then((successful) => {
            console.log("Successfully unsubscribe push manager")
          })
          .catch((e) => {
            console.error("Failed to unsusbcribe push manager")
          });
      }
    });
  });
}

return (
    <button
        onClick={() => {
          unsubscribePushManger();
        }}
      >
        Unsubscribe push subscription
    </button>
)