Integration Tutorial

Follow this guide to integrate PushWeb Pro notifications into your web application.

1

Setup Service Worker

Create a file named sw.js in your project's public root directory (e.g., public/sw.js). This service worker is required to handle background notifications.

// public/sw.js
importScripts("https://notify.affshare.site/push-notification.js");
2

Import SDK

Add the SDK script to your HTML <head> or import it in your main entry file.

<script src="https://notify.affshare.site/sdk.js"></script>
3

Initialize & Subscribe

The integration is a two-step process:

  1. Initialization: Registers the Service Worker, requests notification permission, and generates the browser push token.
  2. Subscription: Sends the generated token to your backend server to save the subscriber.

A. Initialize SDK

The SDK script creates a global pushwebSDK object. Call init() when your app starts. 

// Initialize Global SDK
pushwebSDK.init({
    publicKey: 'YOUR_PUBLIC_KEY', // Get from dashboard
    clientId: 'OPTIONAL_USER_ID'  // Optional: Link to your user system
}).then(() => {
    console.log('SDK Initialized & Browser Token Generated');
});

B. Sync to Server

Call subscribe() to save the user to your database. 

// Trigger this on button click
async function onSubscribeClick() {
    try {
        await pushwebSDK.subscribe();
        console.log('User saved to server!');
    } catch (error) {
        console.error('Failed to sync subscription:', error);
    }
}
4

Send Notification

Send notifications using our REST API. You'll need your API Token. 

curl -X POST https://notify.affshare.site/api/messages \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Hello World",
    "message": "This is a test notification",
    "icon": "https://example.com/icon.png"
  }'