> ## 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

> Step-by-Step Guide to setup WebPush notification in javascript websites like React, Vue, and Next.js.

<Tip>
  WebPush notifications only work over HTTPS. Most browsers allow push to work in localhost also for development purposes.
</Tip>

### Pre-Requisites

* Integration of [JavaScript SDK](/docs/integrate-javascript-sdk)

## Integration Steps

<Steps>
  <Step title="Configuration">
    While creating SuprSend instance you have to pass vapidKey (get it in SuprSend Dashboard --> Vendors --> WebPush).

    If you want to have custom serviceworker file name instead of `serviceworker.js`(mentioned in step2), you can pass name of it in `swFileName`.

    <CodeGroup>
      ```typescript typescript theme={"system"}
      new SuprSend(publicApiKey: string, {vapidKey?: string, swFileName?: string})
      ```
    </CodeGroup>
  </Step>

  <Step title="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`. Add below lines of code in that file and replace publicApiKey with key you find in API Keys page in SuprSend Dashboard.

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

  <Step title="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>
      ```typescript 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.
  </Step>
</Steps>

## Other available methods

### Check for permission

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

<CodeGroup>
  ```typescript syntax theme={"system"}
  suprSendClient.webpush.notificationPermission():
  ```
</CodeGroup>

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

**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.

***