Adjustment

docs/guides/web-push.md

@@ -1,6 +1,11 @@
 # 🌐 Setup Web Push
 
 import webPushWorkflow from '@site/static/webPushWorkflow.png';
+import macosNotifications from '@site/static/macosNotifications.png';
+import windowsNotifications from '@site/static/windowsNotifications.png';
+import notificationPopup from '@site/static/notificationPopup.png';
+import notificationPreferences from '@site/static/notificationPreferences.png';
+import webConsoleServiceWorker from '@site/static/webConsoleServiceWorker.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.
 
@@ -10,26 +15,9 @@ To set up Web Push Notifications with NotificationAPI, you'll need to:
 
 1. **Create a Notification Template** in the NotificationAPI Dashboard.
 2. **Implement the Frontend SDK** on your website.
-3. **Set Up the Service Worker**.
-4. **Send Notifications from the Backend** using NotificationAPI's Backend SDKs.
-
-## Schematic Diagram
-
-Below is a detailed schematic that breaks down each step:
-
-<img src={webPushWorkflow} style={{borderRadius: 8, width: "100%"}} />
-
-**Steps Explained**:
-
-1. **User Visits Website**: The user navigates to your website using their browser.
-2. **Frontend SDK Initialization**: The website loads the Frontend SDK, which initializes and registers the service worker.
-3. **Service Worker Registration**: The service worker is essential for handling background tasks and notifications.
-4. **User Permission Prompt**: The SDK prompts the user to grant permission for notifications.
-5. **User Subscribes**: Upon granting permission, the user is subscribed to receive notifications.
-6. **Backend Sends Notification**: An event in your system triggers the backend to send a notification via NotificationAPI.
-7. **Notification Dispatch**: NotificationAPI processes the request and dispatches the notification to the user's browser.
-8. **Browser Receives Notification**: The service worker receives the notification in the background.
-9. **Notification Displayed**: The browser displays the notification to the user, even if they're not on your website.
+3. **Set Up the Service Worker** on your website.
+4. **Give permission** on your browser.
+5. **Send Notifications from the Backend** using NotificationAPI's Backend SDKs.
 
 ---
 
@@ -42,8 +30,6 @@ Below is a detailed schematic that breaks down each step:
 3. Enable "Web Push" as a channel.
 4. Customize the template to suit your needs.
 
----
-
 **Step 2: Implement the Frontend SDK**
 
 Integrate the NotificationAPI Frontend SDK into your web page to handle user subscriptions and display notifications.
@@ -126,24 +112,22 @@ The service worker manages background tasks and is essential for receiving push
 2. **Place the file** in the `public` folder of your web application. It should be accessible at `https://yourdomain.com/notificationapi-service-worker.js`.
 3. **Update the SDK Initialization**: If the service worker is not at the root, specify its path using the `customServiceWorkerPath` parameter during SDK initialization.
 
----
-
-**Step 4: Give permission On your browser**
+**Step 4: Give permission on your browser**
 
 **Option 1: Rely on NotificationAPI Pre-Built component (Recommended)**
 If you are using our front-end 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. Click on the bell notification icon, and it will ask the user whether they want to web push notifications.
 
-![notification icon](image.png)
+<img src={notificationPopup} style={{borderRadius: 8, width: "100%", maxWidth: 600}} />
 
 2. Click on <u>Yes</u>.
 
 This would prompt the browser to ask for permission to show notifications.
 
 3. If you do not see the message in the NotificationAPI, click on the bell notification icon and then click on the settings icon, which is there in the top right corner.
 
-![notification preferences](image-1.png)
+<img src={notificationPreferences} style={{borderRadius: 8, width: "100%", maxWidth: 600}} />
 
 Click on <u>Click here</u>.
 
@@ -154,8 +138,6 @@ You can use the following method to ask your user to opt in for the web Push not
 notificationapi.askForWebPushPermission();
 ```
 
----
-
 **Step 5: Send Notifications from the Backend**
 
 With the frontend set up to receive notifications, you can now send them from your backend.
@@ -165,11 +147,31 @@ With the frontend set up to receive notifications, you can now send them from yo
 
 ---
 
+## Schematic Diagram
+
+Below is a detailed schematic that breaks down each step:
+
+<img src={webPushWorkflow} style={{borderRadius: 8, width: "100%"}} />
+
+**Steps Explained**:
+
+1. **User Visits Website**: The user navigates to your website using their browser.
+2. **Frontend SDK Initialization**: The website loads the Frontend SDK, which initializes and registers the service worker.
+3. **Service Worker Registration**: The service worker is essential for handling background tasks and notifications.
+4. **User Permission Prompt**: The SDK prompts the user to grant permission for notifications.
+5. **User Subscribes**: Upon granting permission, the user is subscribed to receive notifications.
+6. **Backend Sends Notification**: An event in your system triggers the backend to send a notification via NotificationAPI.
+7. **Notification Dispatch**: NotificationAPI processes the request and dispatches the notification to the user's browser.
+8. **Browser Receives Notification**: The service worker receives the notification in the background.
+9. **Notification Displayed**: The browser displays the notification to the user, even if they're not on your website.
+
+---
+
 ## Frequently Asked Questions (FAQs)
 
 ### Why I see this message: WEB_PUSH delivery is activated, but the user's webPushTokens is not provided. Discarding WEB_PUSH.?
 
-It means that you have done **Step 1** and **Step 5** correctly, but you probably have not implemented our frontend SDK correctly (**Step 2**), or you have not set up the service worker (**Step 3**), or your user is not opted in for receiving web push notification.
+It means that you have done **Step 1** and **Step 5** correctly, but you probably have not implemented our frontend SDK correctly (**Step 2**), or you have not set up the service worker (**Step 3**), or your user is not opted in for receiving web push notification (**Step 4**).
 
 ### Why can I not see the browser prompt in **Step 3**?
 
@@ -193,6 +195,24 @@ If you do not see the message in the NotificationAPI component, that browser has
 
 2. Open the built-in developer tools for the site (F12 on PC or fn + F12 on Mac), then go to Applications >> Service workers. If the service worker has been initialized, it would look something like this:
 
-![dev tools](image-2.png)
+<img src={webConsoleServiceWorker} style={{borderRadius: 8, width: "100%", maxWidth: 600}} />
 
 3. If <u>notificationapi-service-worker.js</u> (Service Worker) doesn't show up, that means the service worker is not there inside the public folder. Please make sure that it is placed inside the public folder. Or pass the address to the publicly available file using `customServiceWorkerPath`
+
+### How to check Notification Settings on macOS and Windows
+
+It's important to verify your notification settings at your operating system level as well to ensure proper functionality.
+
+#### macOS
+
+1. Go to System Preferences > Notifications.
+2. Find your app (chrome, firefox, safari, etc...) in the list and ensure notifications are enabled.
+
+<img src={macosNotifications} style={{borderRadius: 8, width: "100%", maxWidth: 600}} />
+
+#### Windows
+
+1. Open Settings > System > Notifications.
+2. Ensure to enable Notifications for proper functionality.
+
+<img src={windowsNotifications} style={{borderRadius: 8, width: "100%", maxWidth: 600}} />