Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
data-watch-page
Mark a button as the watch toggle for the current page. Stores a content hash; on revisit, fires a watch notification when content has changed.
Overview
Add data-watch-page to any <button> to make it a per-page bookmark + change-watcher. Click toggles between “Watch” and “Watching.” State persists per-URL via VBStore.
On every subsequent visit the script recomputes a content hash of the page’s <main> (or <article>); if it differs from the stored hash, a notification-wc:new event fires so <notification-wc> can surface the change. The watch list itself appears in the notification panel’s “Watching” tab.
This is the internal equivalent of GoodURL’s outbound link health monitoring — it watches your own pages for content drift, not other sites’ URLs.
Markup
Place the button anywhere — <page-tools> is the conventional home, but any DOM location works. The script lazy-loads when it sees the attribute on the page.
Basic watch button
<button type="button" data-watch-page> <icon-wc name="eye"></icon-wc> <span>Watch for updates</span></button>The script swaps the <icon-wc> name (eye ↔ eye-off) and the inline text label (Watch for updates ↔ Watching). To keep your own label, add data-watch-label-locked.
Inside page-tools
<page-tools data-position="sticky"> <print-page></print-page> <button type="button" data-watch-page> <icon-wc name="eye"></icon-wc> <span>Watch</span> </button></page-tools>What gets stored
VBStore namespace watches, key = location.pathname. Each entry:
Stored shape
{ url: '/docs/getting-started', title: 'Getting Started — Vanilla Breeze', contentHash: 'a8f3c2b9', // FNV-1a of main textContent watchedAt: '2026-04-21T10:00:00Z', lastChecked: '2026-04-21T15:30:00Z', lastChanged: null, // ISO timestamp when hash last differed subscriptionId: null, // server-side id if /go/notify/subscribe was used}The hash deliberately covers only <main> (or the first <article>) so nav/footer/sidebar churn doesn’t trigger false positives.
Events
| Event | Detail | When |
|---|---|---|
page-watch:add | { entry } | User clicked Watch |
page-watch:remove | { url, subscriptionId } | User clicked Unwatch (in the button or in the notification panel’s Watching tab) |
notification-wc:new | { notification } | Page revisit detected a hash change — type is watch |
Server-side sync (opt-in)
If your site has a /go/notify backend, you can mirror watches server-side so the system can notify users between visits (e.g., via email). Opt in with a meta tag or a global flag:
Opt in via meta tag
<meta name="vb-page-watch-server" content="true">Or via a global before main.js loads
window.vbPageWatch = { serverSync: true };When enabled, the watch button additionally POSTs /go/notify/subscribe with { url, type: "page-watch", notify: ["panel"] } on watch, and DELETEs the subscription on unwatch. Failures are logged to the console; the local watch still works regardless.
Accessibility
- The button uses
aria-pressedto expose watched/unwatched state to assistive tech. titleupdates to describe the next action (“Watch this page for content updates” vs. “Stop watching this page”).- Operates as a normal
<button>— native keyboard activation, focus styles, and screen-reader announcements come for free.
Related
<watch-wc>— one-tag wrapper for this attribute — preferred for new code<notification-wc>— surfaces the watch list in its panel and renderswatchnotifications when content changes- Service Contracts —
/go/notify/subscribe— the server-side subscription contract data-highlights— uses the same FNV-1a hash to detect content drift on highlights