> ## Documentation Index
> Fetch the complete documentation index at: https://docs.suprsend.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WebPush

> Integration steps of webpush in react application.

## Integration steps

### Step 1: Integrate SuprSendProvider

Please follow this guide to integrate [SuprSendProvider](https://docs.suprsend.com/docs/react-1#suprsendprovider) in your application. Pass `vapidKey` prop to `SuprSendProvider`. You can find it in *`SuprSendDashboard --> Vendors --> WebPush`*.

### Step 2: Add ServiceWorker file

Service worker file is the background worker script which handles push notifications.

Create `serviceworker.js` file such that it should be publicly accessible from `https://<your_domain>/serviceworker.js`. If you want to customise this default service worker file name `serviceworker.js` to other file, pass `swFileName` prop to `SuprSendProvider`. Add below lines of code in that service worker file and replace `YOUR_PUBLIC_API_KEY` with key you find in API Keys page in SuprSend Dashboard.

<CodeGroup>
  ```javascript serviceworker.js theme={"system"}
  importScripts('https://cdn.jsdelivr.net/npm/@suprsend/web-sdk@4.0.0/public/serviceworker.min.js');
  initSuprSend(YOUR_PUBLIC_API_KEY); // replace publicApiKey with your value
  ```
</CodeGroup>

### Step 3: Accessing webpush methods using useSuprSendClient hook

All available webpush methods can be accessed using SuprSend client instance. You can get the SuprSend client instance using [useSuprSendClient](https://docs.suprsend.com/docs/react-1#usesuprsendclient) hook.

### Step 4: Register Push

Call `registerPush` in your code, which will perform following tasks:

* Ask for notification permission.

* Register push service and generate webpush token.

* Send webpush token to SuprSend.

<CodeGroup>
  ```javascript TypeScript theme={"system"}
  const response = await suprSendClient.webpush.registerPush();
  ```
</CodeGroup>

> **Returns:** `Promise<ApiResponse>`

<Note>
  This method should be called on user action like button click for better UX, don't call this on page load.
</Note>

## Other available methods

### Check for permission

To check if user has enabled notifications permission use method provided by library

```javascript theme={"system"}
suprSendClient.webpush.notificationPermission():
```

This will return a string representing the current permission. The value can be:

| Value   | Description                                                                               |
| ------- | ----------------------------------------------------------------------------------------- |
| granted | The user has granted permission for the current origin to display notifications.          |
| denied  | The user has denied permission for the current origin to display notifications.           |
| default | The user's decision is unknown. This will be permission when user first lands on website. |