Web APIs
Beacon API Code Completion Exercises
Complete real Beacon API calls — payloads, CORS-safe types, quota handling, and transport choices — by filling in the missing code.
Interactive exercises that help you practice, check your understanding, and find what to revisit.
Start here
Complete the code: The Beacon API Landscape
Fill in the missing pieces of feature detection and the fire-and-forget contract.
Explore the collection
Exercises
Browse the complete collection and choose the resource that matches what you want to practice or understand.
-
ExercisesBeginner
Complete the code: The Beacon API Landscape
Fill in the missing pieces of feature detection and the fire-and-forget contract.
~4 min read Start exercise -
ExercisesBeginner
Complete the code: The Core API
Fill in the missing pieces of the sendBeacon signature, boolean contract, and realm checks.
~4 min read Start exercise -
ExercisesBeginner
Complete the code: Data Types & the CORS Trap
Fill in the missing payload types that keep the derived Content-Type on the safelist.
~4 min read Start exercise -
ExercisesIntermediate
Complete the code: The 64 KiB Quota
Fill in the missing quota constants and the in-flight accounting.
~4 min read Start exercise -
ExercisesIntermediate
Complete the code: Page Lifecycle & Delivery
Fill in the missing lifecycle states, events, and the flusher's guards.
~4 min read Start exercise -
ExercisesIntermediate
Complete the code: CORS Server-Side
Fill in the missing response headers a credentialed beacon collector must send.
~4 min read Start exercise -
ExercisesIntermediate
Complete the code: Workers & Interception
Fill in the missing realm checks and Service Worker interception patterns.
~4 min read Start exercise -
ExercisesIntermediate
Complete the code: fetch(keepalive)
Fill in the missing superset flags — and the guarantee it still cannot give you.
~4 min read Start exercise -
ExercisesIntermediate
Complete the code: Decision Tree & Hybrid Transport
Fill in the missing routing logic of the hybrid sender.
~4 min read Start exercise -
ExercisesAdvanced
Complete the code: Real-World Patterns
Fill in the missing pieces of pageviews, error reports, crash queues, and restore pings.
~4 min read Start exercise -
ExercisesAdvanced
Complete the code: fetchLater / Deferred Fetch
Fill in the missing fetchLater options, quota constants, and fallback ladder rungs.
~4 min read Start exercise -
ExercisesAdvanced
Complete the code: Testing & Debugging
Fill in the missing Playwright interception patterns and lifecycle-state drivers.
~4 min read Start exercise