معرفی Push Notification در PWA

Push Notification یعنی ارسال پیام از سرور به مرورگر کاربر، حتی زمانی که:

• وب‌سایت بسته است
• کاربر در تب دیگری است
• یا حتی مرورگر مینیمایز شده است

این قابلیت از طریق دو فناوری اصلی امکان‌پذیر می‌شود:

• Service Worker
• Push API + Notification API

معماری Push Notification در PWA

سه بخش اصلی دارد:

1. Frontend (Browser)

• نصب Service Worker
• گرفتن Permission از کاربر
• گرفتن Push Subscription از Push Service

1. Push Service (Firebase / Vapid WebPush)

• واسط بین مرورگر و سرور شما
• نگهداری کلیدهای رمزنگاری (VAPID Keys)

1. Backend Server

• ارسال Push با WebPush Protocol
• هدف‌گذاری و مدیریت کاربران

مراحل کامل پیاده‌سازی

1. ساخت Service Worker

فایل: sw.js

                                
self.addEventListener("push", event => {
  const data = event.data.json()

  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: "/icons/icon-192.png",
      data: data.url,
    })
  )
})

self.addEventListener("notificationclick", event => {
  event.notification.close()
  event.waitUntil(clients.openWindow(event.notification.data))
})

2. گرفتن اجازه از کاربر (Frontend)

                                
async function askPermission() {
  const permission = await Notification.requestPermission()
  return permission === "granted"
}

3. ثبت Service Worker

                                
navigator.serviceWorker.register("/sw.js")

4. تولید VAPID Keys (Backend)

با Node.js:

                                
npx web-push generate-vapid-keys

خروجی:

• Public Key
• Private Key

Public Key برای Frontend

Private Key فقط در Backend

5. گرفتن Push Subscription در Frontend

const register = await navigator.serviceWorker.ready

const subscription = await register.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: PUBLIC_VAPID_KEY
})

await fetch("/save-subscription", {
  method: "POST",
  body: JSON.stringify(subscription)
})

این subscription در دیتابیس ذخیره می‌شود.

6. ارسال Push Notification از Backend

Node.js مثال:

const webpush = require("web-push")

webpush.setVapidDetails(
  "mailto:admin@example.com",
  PUBLIC_KEY,
  PRIVATE_KEY
)

async function sendNotification(subscription, data) {
  await webpush.sendNotification(subscription, JSON.stringify(data))
}

نمونه فراخوانی:

sendNotification(subscription, {
  title: "سفارش شما ارسال شد",
  body: "پیک در مسیر است 🚚",
  url: "https://mysite.com/orders/123"
})

نکات امنیتی مهم

• Private VAPID Key را هرگز در Frontend قرار ندهید
• Subscription را با HTTPS ارسال کنید
• Service Worker فقط روی HTTPS اجرا می‌شود
• Push Notifications باید User Gesture داشته باشد (کاربر باید کلیک کند)

بهترین سناریوهای استفاده

Push Notifications بسیار مؤثر هستند در:

• فروشگاه اینترنتی
• خبر و رسانه
• پیام‌رسان‌ها
• اپلیکیشن‌های سیستم رزرواسیون
• اعلان‌های وضعیت سفارش
• یادآورها

محدودیت‌ها در ۲۰۲۶

به‌طور کلی پشتیبانی بسیار گسترده شده است:

• Chrome ✓
• Edge ✓
• Opera ✓
• Safari iOS 16.4+ ✓
• Firefox ✓

اما سیاست‌های اپل همچنان سخت‌گیرانه‌تر از Chrome است.

جمع‌بندی

Push Notification یکی از مهم‌ترین قابلیت‌های PWA است.

با استفاده از:

• Service Worker
• Push Manager
• VAPID Keys
• Backend WebPush

می‌توانید یک سیستم اعلان کامل و واقعی بسازید که تجربه کاربری را به سطح بالاتری می‌برد.

این قابلیت می‌تواند:

• نرخ بازگشت کاربران را افزایش دهد
• تعامل کاربران را بالا ببرد
• و بسیاری از فرایندهای مهم مثل سفارش‌دهی را بهبود دهد