📬 Push Messaging API

Back

What is Push Messaging?

The Push API allows a server to send messages to a web app at any time — even when the app isn't open! It uses a push service (provided by the browser vendor) as an intermediary between your server and the user's browser.

How Push Messaging Works:

1 Web app asks browser for a push subscription
2 Browser contacts its push service and gets an endpoint URL
3 Web app sends the subscription (endpoint + keys) to your server
4 Your server sends a push message to the push service endpoint
5 Push service delivers the message to the browser's Service Worker
6 Service Worker shows a notification to the user

⚠️ Note About This Demo

Push messaging requires a server component to send actual push messages. This demo shows the client-side subscription flow and simulates push events using the Service Worker's push event from DevTools.

You can trigger push events manually from Application → Service Workers → Push!

Push Subscription

Status: Not subscribed

Subscription Details:

No active subscription

Simulate Push (via Service Worker)

Since we don't have a push server, you can simulate push events from DevTools:

  1. Go to Application → Service Workers
  2. Find the registered service worker
  3. In the "Push" text field, type a message (e.g., Hello from Push!)
  4. Click the "Push" button — a notification should appear!

Event Log

🔧 DevTools: Inspecting Push Messaging

  1. Open DevTools → Application panel
  2. Expand Background services → click Push Messaging
  3. Click the record button (⏺) to start recording push events
  4. Subscribe to push and observe the subscription event
  5. Go to Service Workers section → use the Push input to send test messages
  6. Watch push events appear in the Push Messaging timeline!

📝 Practice Exercise

  1. Start recording in the Push Messaging panel
  2. Click "Subscribe to Push" — examine the subscription endpoint
  3. Go to Service Workers and send a push message with text "Test push!"
  4. Observe the notification and the event in the Push Messaging timeline
  5. Unsubscribe and try sending another push — what happens?
  6. Check the subscription details — notice the endpoint URL and encryption keys