@binance/web-push-sdk

@binance/web-push-sdk is a client-side notification pushing SDK based on firebase-js-sdk that provides utilities to make and manage pushing subscription.

Install

yarn add @binance/web-push-sdk

Usage

import { subscribe, canSubscribe, canUpdateSubscription, ErrorCode } from '@binance/web-push-sdk'
import { useEffect, useState } from 'react'

const updateSubscriptionTimeout = 2000

export default function Page() {
  const subscribeHandler = () => {
    subscribe()
      .then((result) => {
        if (result) {
          // do something after success
        }
      }).catch((e) => {
        if (e.code === ErrorCode.PERMISSION_DEFAULT) {
          console.warn('user closed the notification permission requesting popup')
        }
    })
  }
  const [showSubscribe, setShowSubscribe] = useState(false)
  useEffect(() => {
    const initSubscribe = async () => {
      if (await canUpdateSubscription()) {
        setTimeout(subscribeHandler, 2000)
      } else if (canSubscribe()) {
        setShowSubscribe(true)
      }
    }
    initSubscribe()
  }, [])
  return (
    <div>
      { showSubscribe ? <button onClick={subscribeHandler}>Subscribe</button> : null }
    </dev>
  )
}

This is an example that, when the page is loaded, it will show subscribe button if the device has not subscribed and will update subscription if the user has subscribed.

API

subscribe(): Promise<boolean>

To make subscription if has not subscribe or update subscription if has subscribed.

• Returns Promise<boolean> Whether the subscribe is successful. Will throw error if unsuccessful.

This method will register a service worker and get pushToken from Google. Then report the pushToken and other information to the backend.

The pushToken will expire in 7 days so we need to update subscription regularly.

In general, just call this method the update subscription every time the page loaded if the device has subscribed.

subscribeIfLoggedIn(): Promise<boolean>

If logged in, subscribe. Otherwise, do nothing.

Returns Promise<boolean> Whether logged in and the subscribe is successful. Will throw error if unsuccessful.

unsubscribe(action?: UpdateActionType): Promise<boolean>

To cancel subscription

• Returns Promise<boolean> Whether the unsubscribe is successful. Will throw error if unsuccessful.

action

• type: UpdateActionType

  type UpdateActionType = 'open_app' | 'login_success' | 'login_fail' | 'change_lang' | 'change_regid' | 'logout'

• default: 'logout' The action enum that reported to the backend when unsubscribe

hasSubscribed(): Promise<boolean>

To determine if it has made subscription by checking firebase info in indexDB

Returns Promise<boolean> Whether it has subscribed

canSubscribe(): boolean

To determine if it can make subscription. As long as the notification permission is not denied, it can subscribe.

Returns boolean Whether it can subscribed

canUpdateSubscription(): Promise<boolean>

To determine whether it can subscribe and has subscribed

Returns Promise<boolean> Whether it can updated subscription

License

MIT