راهنمای پیاده‌سازی Web Push

// Add to your service worker file
importScripts('https://cdn.metrix.ir/sdk/web/metrixweb-sw.js');

init('APP_ID', 'API_KEY', {
  push: {
    enabled: true,
    publicKey: 'YOUR_VAPID_PUBLIC_KEY',
    hasSW: true,
  },
});

import { init } from '@metrixorg/websdk';
 
init('APP_ID', 'API_KEY', {
  push: {
    enabled: true,
    publicKey: 'YOUR_VAPID_PUBLIC_KEY',
    hasSW: false,  // Set to true if using existing service worker
    showBell: true,  // Optional: Display bell icon
    showBackdrop: false,  // Optional: Show permission dialog on init
    popUpText: 'Enable notifications',  // Custom bell popup text
    position: 'bottom-right',  // Bell position
  },
});

import { subscribePush } from '@metrixorg/websdk';
 
// این تابع را در پاسخ به یک تعامل کاربر (مانند کلیک روی دکمه) فراخوانی کنید
async function enableNotifications() {
  try {
    const state = await subscribePush();
 
    if (state === 'subscribed') {
      console.log('✓ Push notifications enabled');
    } else if (state === 'blocked') {
      console.log('✗ User blocked notifications');
    } else if (state === 'closed') {
      console.log('○ Permission dialog closed');
    }
  } catch (error) {
    console.error('Failed to enable push:', error);
  }
}
 
// این کد را به یک دکمه یا هر تعامل کاربری دیگری متصل کنید
document.getElementById('enable-btn').addEventListener('click', enableNotifications);

init('APP_ID', 'API_KEY', {
  push: {
    enabled: true,
    publicKey: 'YOUR_VAPID_PUBLIC_KEY',
    showBackdrop: true,
    backdropDelay: 2000, // 2 second delay
    backdropText: 'Enable notifications to stay updated',
  },
});

import { openPushConfirmBackdrop } from '@metrixorg/websdk';
 
async function showPermissionDialog() {
  const state = await openPushConfirmBackdrop({
    backdropText: 'Get important updates',
    backdropDelay: 500,
  });
 
  console.log('User decision:', state);
}
 
// این دیالوگ را پس از تعامل کاربر نمایش دهید
document.getElementById('settings-btn').addEventListener('click', showPermissionDialog);

init('APP_ID', 'API_KEY', {
  push: {
    enabled: true,
    publicKey: 'YOUR_VAPID_PUBLIC_KEY',
    showBell: true,
    popUpText: 'Click to enable notifications',
    position: 'bottom-right', // or top-left, top-right, bottom-left
  },
});

type ConfirmPushState = 'subscribed' | 'blocked' | 'closed';

subscribePush(): Promise<ConfirmPushState>

const state = await subscribePush();

openPushConfirmBackdrop(config: {
  backdropText: string;
  backdropDelay?: number;
}): Promise<ConfirmPushState>

const state = await openPushConfirmBackdrop({
  backdropText: 'Enable notifications',
  backdropDelay: 1000,
});

onPushStateResolved(): Promise<ConfirmPushState>

const finalState = await onPushStateResolved();

notificationPermissionState(): NotificationPermission | undefined

const permission = notificationPermissionState();
if (permission === 'granted') {
  console.log('Already enabled');
}

getPushSubscription(): Promise<PushSubscriptionJSON | undefined>

const subscription = await getPushSubscription();
if (subscription) {
  console.log('Endpoint:', subscription.endpoint);
}

interface PushConfig {
  enabled: boolean;           // Enable push (required)
  publicKey: string;          // VAPID public key (required)
  hasSW?: boolean;            // Existing service worker? (default: false)
  showBell?: boolean;         // Show bell icon? (default: false)
  showBackdrop?: boolean;     // Show backdrop on init? (default: false)
  backdropText?: string;      // Backdrop message text
  backdropDelay?: number;     // Backdrop delay in ms
  popUpText?: string;         // Bell popup text
  position?: string;          // Bell position (top-left, top-right, bottom-left, bottom-right)
}

import {
  init,
  authorizeUser,
  subscribePush,
  notificationPermissionState,
  getPushSubscription,
} from '@metrixorg/websdk';
 
// مقداردهی اولیه SDK
init('APP_ID', 'API_KEY', {
  push: {
    enabled: true,
    publicKey: 'YOUR_VAPID_PUBLIC_KEY',
    hasSW: false,
  },
});
 
// شناسایی کاربر (اختیاری اما توصیه می‌شود)
authorizeUser('user@example.com');
 
// افزودن دکمه درخواست مجوز
document.getElementById('notify-btn').addEventListener('click', async () => {
  const permission = notificationPermissionState();
 
  // اگر از قبل مجوز داده شده یا رد شده است، از ادامه صرف نظر کنید
  if (permission === 'granted') {
    alert('نوتیفیکیشن‌ها از قبل فعال هستند.');
    return;
  }
 
  if (permission === 'denied') {
    alert('لطفاً نوتیفیکیشن‌ها را از تنظیمات مرورگر خود فعال کنید.');
    return;
  }
 
  // درخواست مجوز
  try {
    const state = await subscribePush();
 
    if (state === 'subscribed') {
      const sub = await getPushSubscription();
      console.log('Subscribed:', sub?.endpoint);
      alert('✓ Notifications enabled');
    } else if (state === 'blocked') {
      alert('Notifications blocked by browser');
    } else {
      alert('Permission request cancelled');
    }
  } catch (error) {
    console.error('Push error:', error);
    alert('Failed to enable notifications');
  }
});

import { init, openPushConfirmBackdrop } from '@metrixorg/websdk';
 
init('APP_ID', 'API_KEY', {
  push: {
    enabled: true,
    publicKey: 'YOUR_VAPID_PUBLIC_KEY',    
    showBackdrop: false,  // Don't show immediately
  },
});
 
// نمایش دیالوگ پس از ۵ ثانیه از اولین تعامل کاربر
let hasInteracted = false;
document.addEventListener('click', () => {
  if (!hasInteracted) {
    hasInteracted = true;
    setTimeout(() => {
      openPushConfirmBackdrop({
        backdropText: 'Stay updated with notifications',
        backdropDelay: 500,
      });
    }, 5000);
  }
});

document.getElementById('checkout-btn').addEventListener('click', async () => {
  // تکمیل فرآیند خرید...
 
  const permission = notificationPermissionState();
  if (permission !== 'denied' && permission !== 'granted') {
    const state = await subscribePush();
    if (state === 'subscribed') {
      console.log('User subscribed to order updates'); // کاربر مشترک به‌روزرسانی‌های سفارش شد
    }
  }
});

init('APP_ID', 'API_KEY', {
  push: {
    enabled: true,
    publicKey: 'YOUR_VAPID_PUBLIC_KEY',
    showBell: true, // نمایش آیکون زنگ
    popUpText: 'Enable notifications',
    position: 'bottom-right',
  },
});
// همچنین یک دکمه سفارشی برای درخواست مجوز اضافه کنید
document.getElementById('custom-notify-btn').addEventListener('click', subscribePush);

// وضعیت Push را بررسی کنید
const permission = notificationPermissionState();
console.log('Push initialized:', permission !== undefined);
console.log('Permission:', permission);
 
// اشتراک را بررسی کنید
getPushSubscription().then(sub => {
  console.log('Subscription:', sub?.endpoint ? 'Active' : 'None');
});
 
// جریان را مانیتور کنید
onPushStateResolved().then(state => {
  console.log('Final state:', state);
});