Web Push Debugger - Online Inspect Subscription & Events

Web Push allows websites to send notifications to users even when the browser is closed. It uses the Push API (for message delivery), Notifications API (for displaying notifications), and a Service Worker (to handle background events). The server sends a push message to the browser vendor's push service (e.g., FCM for Chrome, APNs for Safari), which then delivers it to the user's device.

Common reasons include: 1) Notification permission not granted – check browser settings. 2) Missing or invalid VAPID applicationServerKey – ensure it's a valid Base64URL-encoded P-256 public key. 3) No Service Worker registered – a SW with a push event listener is required to receive pushes. 4) The site is not served over HTTPS (required for Push API). 5) The browser doesn't support Web Push (e.g., iOS Safari before 16.4). Use this debugger to diagnose each step.

Use the VAPID Key Generator above, or generate them via command line: npx web-push generate-vapid-keys. VAPID keys are ECDSA P-256 key pairs. The public key is shared with the frontend (used in pushManager.subscribe()), while the private key stays on your server to sign push requests. You can also use OpenSSL: openssl ecparam -genkey -name prime256v1 -out private.pem && openssl ec -in private.pem -pubout -outform DER | tail -c 65 | base64 | tr '+/' '-_' | tr -d '='.

The Notification API displays notifications on the device. It works even without Push – you can trigger a local notification while the user is on your site. The Push API delivers messages from your server to the browser, even when the user is offline or the site is closed. Push messages are typically displayed using the Notification API inside a Service Worker's push event handler. Together they enable remote push notifications.

Local testing requires: 1) Run your site on localhost (exempt from HTTPS requirement). 2) Use this debugger to subscribe and get the subscription object. 3) Copy the subscription JSON to a testing script or use the web-push npm library to send a test notification. 4) Alternatively, use browser DevTools → Application → Service Workers → Push to simulate a push event. Note: Firefox supports localhost push without HTTPS; Chrome requires HTTPS or localhost.

Web Push is supported on: Chrome (desktop & Android), Firefox (desktop & Android), Edge (desktop & Android), Opera, Samsung Internet, and Safari (macOS 13+ and iOS/iPadOS 16.4+). As of 2024, global Web Push support reaches ~94% of browser users. iOS Safari added full push support in version 16.4 (March 2023), which was a major milestone for the technology.

This error means the user (or browser) has blocked notifications. Solutions: 1) Guide users to click the lock/tune icon in the address bar and enable notifications. 2) On Chrome: Settings → Privacy & Security → Site Settings → Notifications → find your site and set to "Allow". 3) On Firefox: click the permissions icon in the address bar → Notifications → Allow. 4) Reset the permission state by clearing site data and re-prompting. 5) Always explain why users should enable notifications before calling requestPermission().

applicationServerKeys (also called VAPID keys) identify your application server to the push service. When subscribing via pushManager.subscribe({userVisibleOnly: true, applicationServerKey: ...}), you provide a public VAPID key. This binds the subscription to your server, ensuring only you (with the corresponding private key) can send push messages to that subscription. It prevents unauthorized servers from spamming your users.

To unsubscribe: call subscription.unsubscribe() on the PushSubscription object. You should also notify your server to remove the subscription from your database. Users can also unsubscribe through browser settings. This debugger's Unsubscribe button handles the client-side unsubscription and logs the event.