demo · v134 · pwa

State Stream

Pick a real-world app pattern (email, doc editor, IDE, chat, music). Edit the document subtitle, watch the simulated PWA title bar update — title stable, subtitle reflects context.

before (concat with <title>)

My App – Inbox — 42 unread

Awkward "App – <title>" concatenation. Three windows of the same app share the same prefix; the suffix wraps off-screen in switchers.

after (document-subtitle)

My App · Inbox — 42 unread

Stable app name + contextual subtitle. OS switcher rows differ by subtitle. Stay legible at narrow widths.

code that drives this

document.querySelector('meta[name=document-subtitle]').setAttribute('content', 'Inbox — 42 unread'); // or, in newer code: document.documentElement.subtitle = 'Inbox — 42 unread';

five real PWA patterns

  1. Mail — folder + unread count. The folder is the only piece a switcher needs to disambiguate two windows of the same client.
  2. Docs editor — file name + dirty state. (saving…) / (saved) gives feedback you'd otherwise hunt for in the toolbar.
  3. IDE — file path + branch. Two windows on the same repo at different branches now actually look different in Alt-Tab.
  4. Chat — current channel + notif count. Replaces noisy badge-only awareness.
  5. Music — track + artist. A bonus pattern: the subtitle effectively becomes the "now playing" string surfaced by the OS media controls.

see also