Skip to content

Commit

Permalink
web push updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@A-KGeorge
A-KGeorge committed Nov 29, 2024
1 parent b560a68 commit 4996e01
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 87 deletions.
168 changes: 84 additions & 84 deletions docs/guides/web-push.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import notificationPopup from '@site/static/notificationPopup.png';
import notificationPreferences from '@site/static/notificationPreferences.png';
import webConsoleServiceWorker from '@site/static/webConsoleServiceWorker.png';
import notificationPreferencesReact from '@site/static/notificationPreferencesReact.png'

import notificationPreferencesPopupReact from '@site/static/notificationPreferencesPopupReact.png'

Web Push Notifications allow you to engage users directly through their web browsers, even when they're not on your website. This guide will walk you through setting up Web Push Notifications using NotificationAPI.
Expand Down Expand Up @@ -45,49 +44,13 @@ import TabItem from '@theme/TabItem';

<Tabs
groupId="frameworks"
defaultValue="vanilla"
defaultValue="react"
values={[
{ label: 'Vanilla JS', value: 'vanilla' },
{ label: 'React', value: 'react'},
{ label: 'Vanilla JS', value: 'vanilla' },
{ label: 'UMD', value: 'umd' }
]
}>
<TabItem value="vanilla">

```shell title="1. Install"
npm install notificationapi-js-client-sdk
# yarn add notificationapi-js-client-sdk
# pnpm add notificationapi-js-client-sdk
```

```js title="2. Import"
import NotificationAPI from 'notificationapi-js-client-sdk';
import 'notificationapi-js-client-sdk/dist/styles.css';
```

```js title="3. Initialize"
const notificationapi = new NotificationAPI({
clientId: 'YOUR_CLIENT_ID',
userId: 'UNIQUE_USER_ID'
});
```

#### Parameters

| Parameter | Type | Description |
| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| clientId\* | string | Your NotificationAPI account clientId. You can get it from [here](https://app.notificationapi.com/environments). |
| userId\* | string | The unique ID of the user in your system. |
| userIdHash | string | Only used for [Secure Mode](/guides/secure-mode). |
| websocket | string | Only if you want to specify your region, for example, if your account is in Canada region you must pass 'wss://ws.ca.notificationapi.com'. |
| language | string | The language used for the pre-built UI widgets. Supported: `en-US`, `es-ES`, `fr-FR`, `it-IT`, `pt-BR` |
| customServiceWorkerPath | string | Path to your service worker file if it's not at the root (e.g., '/custom/path/notificationapi-service-worker.js'). |

<sup>\*</sup> Required parameters

For more information please checkout our [vanilla JS SDK](/reference/js-client#setup--initialization) guide.

</TabItem>

<TabItem value="react">
```shell title="1. Install"
Expand All @@ -109,7 +72,6 @@ import { NotificationAPIProvider } from '@notificationapi/react';
// user={{
// id: "abcd-1234", // logged in userId
// }}
playSoundOnNewNotification={true} // Allow the user to hear default sound on new notification
>
{/* your protected routes */}
</NotificationAPIProvider>
Expand All @@ -131,6 +93,43 @@ For more information please checkout our [React SDK](/reference/react-sdk#setup)
</TabItem>
<TabItem value="vanilla">
```shell title="1. Install"
npm install notificationapi-js-client-sdk
# yarn add notificationapi-js-client-sdk
# pnpm add notificationapi-js-client-sdk
```
```js title="2. Import"
import NotificationAPI from 'notificationapi-js-client-sdk';
import 'notificationapi-js-client-sdk/dist/styles.css';
```
```js title="3. Initialize"
const notificationapi = new NotificationAPI({
clientId: 'YOUR_CLIENT_ID',
userId: 'UNIQUE_USER_ID'
});
```
#### Parameters
| Parameter | Type | Description |
| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| clientId\* | string | Your NotificationAPI account clientId. You can get it from [here](https://app.notificationapi.com/environments). |
| userId\* | string | The unique ID of the user in your system. |
| userIdHash | string | Only used for [Secure Mode](/guides/secure-mode). |
| websocket | string | Only if you want to specify your region, for example, if your account is in Canada region you must pass 'wss://ws.ca.notificationapi.com'. |
| language | string | The language used for the pre-built UI widgets. Supported: `en-US`, `es-ES`, `fr-FR`, `it-IT`, `pt-BR` |
| customServiceWorkerPath | string | Path to your service worker file if it's not at the root (e.g., '/custom/path/notificationapi-service-worker.js'). |
<sup>\*</sup> Required parameters
For more information please checkout our [vanilla JS SDK](/reference/js-client#setup--initialization) guide.
</TabItem>
<TabItem value="umd">
```html title="1. Add to HTML, before </head>"
Expand Down Expand Up @@ -177,13 +176,25 @@ The service worker manages background tasks and is essential for receiving push
Code examples for **step 3**:
<Tabs
groupId="frameworks"
defaultValue="vanilla"
defaultValue="react"
values={[
{ label: 'Vanilla JS', value: 'vanilla' },
{ label: 'React', value: 'react'}
{ label: 'React', value: 'react'},
{ label: 'Vanilla JS', value: 'vanilla' }
]}
> <TabItem value="react">
```jsx
<NotificationAPIProvider
userId="YOUR_CLIENT_ID"
clientId="UNIQUE_USER_ID"
customServiceWorkerPath="service/notificationapi-service-worker.js"
>
{/* Your components */}
</NotificationAPIProvider>
```
</TabItem>
<TabItem value="vanilla">
```js
Expand All @@ -195,32 +206,47 @@ const notificationapi = new NotificationAPI({
```
</TabItem>
<TabItem value="react">
```jsx
<NotificationAPIProvider
userId='YOUR_CLIENT_ID'
clientId='UNIQUE_USER_ID'
customServiceWorkerPath="service/notificationapi-service-worker.js"
>
{/* Your components */}
</NotificationAPIProvider>
```
</TabItem>
</Tabs>
**Step 4: Give permission on your browser**
<Tabs
groupId="frameworks"
defaultValue="vanilla"
defaultValue="react"
values={[
{ label: 'Vanilla JS', value: 'vanilla' },
{ label: 'React', value: 'react'}
{ label: 'React', value: 'react'},
{ label: 'Vanilla JS', value: 'vanilla' }
]}
>
<TabItem value="react">
**Option 1: Rely on NotificationAPI Pre-Built component (Recommended)** If you are using our react SDK to show in-app notifications. You can simply rely on our SDK to ask your users to opt in for web push notification.
1. Place the `<NotificationPopup />` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#popup) guide.
<img src={notificationPreferencesReact} style={{borderRadius: 8, width: "100%", maxWidth: 600}}/>
2. Click on Notification Preferences. This would open a popup.
<img src={notificationPreferencesPopupReact} style={{borderRadius: 8, width: "100%", maxWidth: 600}} />
3. Click on Yes.
This would prompt the browser to ask for permission to show notifications. Alternatively, you can place the `<NotificationPreferencesPopup />` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#preferences-popup) guide.
**Option 2: Using built-in method** You can place the code inside a component which is inside the `NotificationAPIProvider` provided by the React SDK and call the `askForWebPushPermission` function when the user interacts with your application.
```jsx
const notificiationapi = NotificationAPIProvider.useNotificationAPIContext();
const askForWebPushPermission = async () => {
notificiationapi.setWebPushOptIn(true);
};
```
</TabItem>
<TabItem value="vanilla">
**Option 1: Rely on NotificationAPI Pre-Built component (Recommended)**
Expand Down Expand Up @@ -249,32 +275,6 @@ notificationapi.askForWebPushPermission();
</TabItem>
<TabItem value="react">
**Option 1: Rely on NotificationAPI Pre-Built component (Recommended)** If you are using our react SDK to show in-app notifications. You can simply rely on our SDK to ask your users to opt in for web push notification.
1. Place the `<NotificationPopup />` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#popup) guide.
<img src={notificationPreferencesReact} style={{borderRadius: 8, width: "100%", maxWidth: 600}}/>
2. Click on Notification Preferences. This would open a popup.
<img src={notificationPreferencesPopupReact} style={{borderRadius: 8, width: "100%", maxWidth: 600}} />
3. Click on Yes.
This would prompt the browser to ask for permission to show notifications. Alternatively, you can place the `<NotificationPreferencesPopup />` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#preferences-popup) guide.
**Option 2: Using built-in method** You can place the code inside a component which is inside the `NotificationAPIProvider` provided by the React SDK and call the `askForWebPushPermission` function when the user interacts with your application.
```jsx
const notificiationapi = NotificationAPIProvider.useNotificationAPIContext();
const askForWebPushPermission = async () => {
notificiationapi.setWebPushOptIn(true);
};
```
</TabItem>
</ Tabs>
**Step 5: Send Notifications from the Backend**
Expand Down
24 changes: 21 additions & 3 deletions docs/reference/react-sdk.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,24 @@ For example, the web push service worker is placed at `public/service` folder an
</App>;
```

### webPushOptInMessage

The `webPushOptInMessage` controls whether the browser automatically prompts users for notification permissions (true or 'AUTOMATIC') or suppresses the prompt (false).

```jsx
<App>
<NotificationAPIProvider
userId="abcd-1234" // logged in userId
clientId="abc123" // your clientId found on the dashboard
webPushOptInMessage={true}
>

<!-- your protected routes -->

</NotificationAPIProvider>
</App>;
```

## In-App Notification Components

### Popup
Expand Down Expand Up @@ -541,12 +559,12 @@ To request permission for notifications, place the following code inside an asyn
notificiationapi.setWebPushOptIn(true);
```
## webPushOptInMessage
## setWebPushOptInMessage
This can be used to control the opt-in message for web push notifications. It can be set to either 'AUTOMATIC' or a boolean value.
The `setWebPushOptInMessage` controls whether the browser automatically prompts users for notification permissions (true or 'AUTOMATIC') or suppresses the prompt (false). It can be set to either 'AUTOMATIC' or a boolean value. It is an alternative to `webPushOptInMessage` inside the `<NotificationAPIProvider />` component.
```javascript
notificationapi.webPushOptInMessage = 'AUTOMATIC';
notificationapi.setWebPushOptInMessage('AUTOMATIC');
```
<!-- -->
Expand Down

0 comments on commit 4996e01

Please sign in to comment.