Lesson 0004 · ~12 minutes · synthesis

Ship the decision, not the buzzword

One skill: given a feature brief, write a complete multi-tab choice — tool, wire shape, source of truth, and one risk you own.

← Lesson 3 Playbook (print) Checklist Core API Glossary Mission

Mission payoff

This is the durable skill from MISSION.md: defend a BroadcastChannel choice (or rejection) in a design review without hand-waving SharedWorker or storage-event cargo cult.

Lesson-only path

You can complete this from lessons 1–3 alone. External MDN / HTML reads remain optional enrichment, not a gate.

1. The playbook (four gates)

Run in order. Earlier gates reject more options than later ones.

Gate A · Job

Notify peers only → BroadcastChannel. Shared process / one socket → SharedWorker. Tab-private state → sessionStorage. Network/offline → service worker. Cross-origin → postMessage. (Lessons 1, 3)

Gate B · Wire

Exact channel name; local apply then post (sender excluded); small structured clone; no transfer list; close() on teardown. (Lesson 2)

Gate C · Truth

Live bus, not mailbox — no history. Late tabs read server/store first, then join. Messages are hints. (Lesson 3)

Gate D · Ship risks

Same origin only; support floor (Safari 15.4+); no BC-only locks; payload size; closed-channel throws; name typos silent. (Lesson 3)

Sentence you should be able to say

“We use BroadcastChannel | SharedWorker | sessionStorage | SW | … because job; wire is name + local-then-post + small clone; truth is store/server; we own origin · support · no lock myth · close hygiene.”

Keep the print playbook open after this course — compressed form of all four lessons.

2. Practice — full briefs

Pick the best default package. Equal-length options.

Brief A · Multi-tab logout

User logs out in tab A; same-origin tabs B and C must clear session UI within a second. No shared compute engine.

Brief B · Live feed, many tabs

Same-origin app; users open many tabs. Product wants one WebSocket to the market feed; every tab shows updates.

Brief C · Theme across tabs

Toggle light/dark in one tab; other open tabs update immediately. Tabs opened later must still show the chosen theme after reload.

Brief D · Checkout wizard isolation

Four-step checkout must survive reload in this tab. A second parallel checkout tab must not overwrite the first flow’s step.

Brief E · Cart leader election

Proposal: tabs elect a cart “leader” only via BroadcastChannel posts; the leader alone mutates cart with no server version checks.

3. What to remember

Gate order: job → wire → truth → ship risks.
BroadcastChannel’s superpower is same-origin live notify — not a process, not a database, not a lock service.
Always own: local-then-post, small clone, durable truth for late joiners, close hygiene, no lock myth.
Print the playbook + checklist for real reviews.

Ask your teacher Bring a real multi-tab brief from work — we’ll run the four gates on it. Follow-ups after the quiz are part of closing the mission.

Primary source (keep handy)

HTML §9.5 (job split + algorithm) and MDN BroadcastChannel (API surface). Design reviews live on the playbook.