Beacon API Learning
A 17-part Beacon API learning path — from fire-and-forget fundamentals and the queueing boolean through the 64 KiB quota, page-lifecycle delivery, CORS, service workers, and fetchLater() — with runnable, spec-verified examples on every page.
Learn the Beacon API the way the spec writes it: the 64 KiB quota, page-lifecycle delivery, CORS traps, service worker interception, and the hybrid transport patterns real products ship.
- Learning resources
- 17
- Beginner
- 4
- Advanced
- 6
- Total time
- 252 min
Start here
1.1 The fire-and-forget problem, and the API that solves it
Begin with the recommended resource, then continue through the learning stages in order.
Explore learning
All learning resources
Search, filter, and sort the complete learning collection for this technology.
17 resources
-
Learningweb-apisBeginner
1.1 The fire-and-forget problem, and the API that solves it
Why teardown-time telemetry is hard, what navigator.sendBeacon() promises (queueing, not delivery), and the fixed fetch recipe every beacon request carries.
~12 min read Open learning -
Learningweb-apisBeginner
1.2 Where sendBeacon lives: Window only
Navigator versus WorkerNavigator, the two-step feature detection that covers every runtime, and an honest separation of spec maturity from shipping folklore.
~10 min read Open learning -
Learningweb-apisBeginner
2.1 The signature: two arguments, two TypeErrors, one boolean
The real sendBeacon IDL with no third parameter, the only two conditions that throw, and what false actually means — demonstrated live.
~11 min read Open learning -
Learningweb-apisBeginner
3.1 Payloads: the BodyInit union and the Content-Type map
Every type sendBeacon's data parameter accepts, the Web IDL stringify truth for odd values, and the fixed Content-Type mapping observed live through Request.
~14 min read Open learning -
Learningweb-apisIntermediate
3.2 The CORS trap: no-cors by default, silent drops always
The safelist rule that decides a beacon's CORS mode, what opaque responses cost, why refused preflights are invisible, and the JSON-Blob story sorted from folklore.
~15 min read Open learning -
Learningweb-apisIntermediate
3.3 CORS-safe payloads: recipes that need no server setup
The JSON-as-text/plain envelope, form encoding for flat events, and a unified payload builder that measures what it sends in real bytes.
~13 min read Open learning -
Learningweb-apisIntermediate
4.1 The 64 KiB quota: one shared pool, body bytes only
The Fetch §4.6 algorithm verbatim, what it counts (bodies only), when slots release, and the myths — simulated live at the byte level.
~15 min read Open learning -
Learningweb-apisIntermediate
4.2 Streams, queues, and the quota-aware sender
Why ReadableStream bodies always throw under keepalive, and the batching queue recipe that moves many events through one pool slot.
~15 min read Open learning -
Learningweb-apisIntermediate
5.1 Page lifecycle: the hidden transition is the contract
The spec's MUST-flush-on-hidden guarantee parsed clause by clause, state-versus-event reasoning, ordering, and mobile reality.
~13 min read Open learning -
Learningweb-apisIntermediate
5.2 The lifecycle flusher: recipe, bfcache, and why unload is out
One flush per hidden transition, bfcache restores identified precisely via persisted pageshow, and the layered case against unload.
~16 min read Open learning -
Learningweb-apisIntermediate
6.1 The server side: a collector endpoint for credentialed beacons
What forced credentials:include demands from the server, the preflight trio, the 204 habit, and a framework-free Node collector.
~16 min read Open learning -
Learningweb-apisAdvanced
7.1 Service workers and beacons: detection and safe forwarding
The keepalive-POST-empty-destination detection triple with its honest false positives, and the buffer-then-re-issue patterns that never lose data.
~18 min read Open learning -
Learningweb-apisAdvanced
8.1 Workers and fetch(keepalive): the superset transport
The keepalive flag's specification, the fetch-groups exemption that lets requests outlive their context, and the exact capability trade against sendBeacon.
~15 min read Open learning -
Learningweb-apisIntermediateAdvanced
9.1 sendBeacon versus fetch(keepalive): the decision and the hybrid layer
One decision function from runtime and capability, the hybrid sender with its discriminated return, and the famous one-line fallback — with the shared-pool trap that makes it a capability answer only.
~17 min read Open learning -
Learningweb-apisAdvanced
10.1 Real-world patterns: the analytics SDK
Batching, lifecycle flushes, bfcache-tagged restores, stable A/B assignment, and IndexedDB persistence with save-before-clear ordering — one vanilla SDK.
~18 min read Open learning -
Learningweb-apisAdvanced
11.1 fetchLater(): deferred fetching, from the specification
The real FetchLaterResult IDL, the five throwing gates, whole-request quota accounting against the per-origin cap, and when deferred beats immediate.
~18 min read Open learning -
Learningweb-apisAdvanced
12.1 Testing beacons, and the complete reference
The Playwright interception fixture the series was validated with, what DevTools can show, and every load-bearing fact on one card with its spec anchor.
~16 min read Open learning