Push Notifications Testing

🔔 Push Notifications Test

Subscription Status

Loading subscription info...

⚠️ No active subscriptions found. Click below to enable notifications.

Testing Instructions

  1. 1. 📢 Make sure notifications are enabled in your browser settings
  2. 2. ✅ Check that "Active Subscriptions" shows at least 1
  3. 3. 📝 Fill in the notification details above
  4. 4. 🚀 Click "Send Test Notification"
  5. 5. 👂 Look at the bottom right of your screen for the notification
  6. 6. 📖 Check browser console (F12) for any errors

💡 Tips:

  • Open DevTools (F12) → Console to see notification logs
  • Notifications might appear in action center on Windows, notification drawer on Mac
  • Click the notification to navigate to the specified URL
  • Check notification.json payload in Network tab for debugging

📚 Resources & Documentation

Browser Support

  • ✅ Chrome/Edge 50+
  • ✅ Firefox 48+
  • ✅ Safari 16+ (macOS)
  • ❌ Safari (iOS)

Common Issues

  • ⚠️ HTTPS required (except localhost)
  • ⚠️ Service Worker must be registered
  • ⚠️ Check notification permissions
  • ⚠️ VAPID keys must match

Debugging Steps

  1. 1. Open DevTools: F12 or Right-click → Inspect
  2. 2. Go to Application → Service Workers to check registration
  3. 3. Check Console tab for errors and log messages
  4. 4. Verify Network tab shows POST to /admin/push/subscribe
  5. 5. Check that Notification.permission === "granted"

🔗 API Endpoints

Get Subscription Info

GET /admin/push/test/info

Send Test Notification

POST /admin/push/test/send

Body: { title, body, url }

Subscribe to Push

POST /admin/push/subscribe

Unsubscribe from Push

POST /admin/push/unsubscribe