Notification Demonstration Dashboard

Control panel for PWA installation, VAPID push subscriptions, messaging tests, service-worker lifecycle and cache-isolation diagnostics. Use it to prove that real background Web Push works.

App version 1.0.0 Acting as me

A. Device information

Browser—
Operating system—
Installed PWA—
Service workers supported—
Service-worker version—
Service-worker state—
Notification permission—
Push API supported—
Badging API supported—
Active push subscription—

Badge appearance depends on the OS, browser and launcher. Not every device shows a numeric badge.

B. Notification controls

Preview

New message from John
Are you available for a chat?
/

Local notifications only appear while a page is running. Only the server-sent Web Push test proves background delivery. Test with the installed app closed.

C. Messaging tests

Sending stores the message, marks the recipient's thread unread, and pushes to every active subscription for the recipient.

D. Service-worker diagnostics

Scope—
Script URL—
Installing—
Waiting—
Active—
Script version—
Last update check—
Last installation time—

Unregistering the service worker stops push delivery for this device until it is registered again. It does not clear your messages, and this app never clears browser storage for you.

E. Versions & update simulation

Application version (separate from service worker)

Current app version1.0.0
Current service-worker version—

App version is served by the server and appears in the footer after a normal refresh. Service-worker version changes require a browser update check, then activation. No fetch handler or cache can mask either version.

F. Cache & isolation diagnostics

Service worker fetch listenerNot checked
Cache Storage usage in service workerNot checked
Cache Storage entries on this originNot checked
Application HTML fetchNot checked
CSS / JavaScript fetchNot checked

Browser HTTP caching is separate from service-worker caching. This app intentionally uses neither for application assets: the service worker has no fetch handler and no Cache Storage.

Registered subscriptions

One user can have several devices. Endpoints are shown shortened.

Loading…

Platform requirements

Android (Chrome)

  1. Open the site in Chrome over HTTPS.
  2. Use the in-app Install app button or Chrome's menu → Install app / Add to Home screen.
  3. Launch the installed app, then tap Enable notifications and allow permission.
  4. Close the app and send a push from this dashboard to prove background delivery.

iPhone (iOS 16.4+)

  1. Open the site in Safari (the install prompt API is not available on iOS).
  2. Tap Share → Add to Home Screen → Add.
  3. Open the new Home Screen app (not the Safari tab).
  4. Tap Enable notifications and allow permission, then test with the app closed.

iOS only supports Web Push in Home Screen web apps. Notifications will not work in a normal Safari tab.

Test mode & what to expect

Local browser notification

  • Created by page JavaScript while the page is running.
  • Does not prove that background push works.
  • Useful only for checking title/body/icon appearance.

Real Web Push notification

  • Encrypted with VAPID and delivered by the browser's push service.
  • Should appear when the website / installed app is closed, if the OS and browser allow it.
  • Requires an active subscription for the recipient user.

To simulate multiple unread messages, send several messages to the same recipient without opening the recipient's conversation. The unread count and badge (where supported) will grow. Opening the conversation marks it read and clears the badge.

Tip: open this dashboard (or the inbox) as user john on a second browser or phone to receive messages sent from me. Subscriptions are per user.