PWA hooks & attributes

This is the place of use for the device consents and PWA behaviours — the markup hooks a developer drops in to switch a ready-made capability on, without building any of the plumbing. The data-pwa-* family are progressive-enhancement hooks read by the PWA brokers on live pages — the geolocation, proximity and notification scripts. A theme adds them to its markup; a broker wires them up once the relevant capability is granted. Markup that depends on a capability stays hidden until its broker activates it, so a page is clean and correct with no JavaScript and no consent. The behaviours these drive are described in Reach.

They are kept deliberately apart from the editor’s data-inline-* and data-ctxr-* worlds (see Editor attributes), so an editor-side sweep never touches the PWA layer.

On the container

Attribute Value / meaning
data-pwa-geo marks a container of distance-sortable geo items
data-pwa-watch opt-in: keep tracking position and re-sort as the visitor moves, rather than sorting once
data-pwa-proximity opt-in: arm proximity alerts for this container — the value is the radius in metres (defaults to 150 if empty)
data-pwa-active set by the broker after a sort has run

On each item

Attribute Value / meaning
data-pwa-lat / data-pwa-lng coordinates; items without them sort last
data-pwa-name optional label (otherwise the item’s first heading)
data-pwa-distance the slot where the broker writes the computed distance label

On buttons

Attribute Value / meaning
data-pwa-near “sort by distance”
data-pwa-notify “alert me nearby” — arms proximity
data-pwa-perms open the central consent modal (location + notifications in one gesture)

The source of truth for these conventions is the platform’s internal attribute register; this page is its public, developer-facing slice. Consent is granted to the device, never to an account, and every hook degrades to nothing when the capability is absent — so a page with these attributes is still a correct page without them.