“Supported” is a surprisingly overloaded word. It can mean a specification exists, a browser has shipped an API, a property is present, permission was granted, or the actual job completed. Those are five different things wearing one trench coat.
A useful capability explorer should show them separately. It should help a visitor try something and understand the result, rather than color a browser logo green and hope for the best.
Start with documented support
MDN’s browser-compatibility data contains structured support statements, including version information and qualifications. Preserve those statements when building an interface. A feature with flags, partial support, or a removal history should not be flattened into a timeless yes/no. The dataset is a snapshot, so record its version or retrieval date. MDN MDN
Avoid inferring one API’s availability from another. A browser capable of rendering a canvas does not thereby support Web Serial. A browser exposing WebGPU does not prove that a particular model or workload will run successfully.
Then ask the running browser
Use feature detection as a preliminary observation:
const capabilities = {
files: typeof File !== "undefined",
workers: typeof Worker !== "undefined",
serial: "serial" in navigator,
webgpu: "gpu" in navigator,
};This detects exposed interfaces, not completed operations. Label it accordingly. For a live demo, keep permission requests behind an explicit action describing the device or input involved.
Web Serial is limited-availability functionality and requires a secure context in supporting browsers. The visitor must select an authorized port before a page can use it. That makes a recorded-file fallback part of a useful measurement tool, not an apologetic extra. MDN contributors
Give each experiment a real result
A file demo can read a visitor-selected text file and report its byte size and recognized rows. A worker demo can run a bounded calculation and return a result. A canvas demo can generate an image and provide a textual description of its parameters. These APIs have different jobs; do not bundle them into an artificial score for “how modern” a browser is. MDN contributors MDN contributors
For each demo, present four states: not available, ready to try, completed, and failed. Permission denied is a normal outcome, not a crash. Keep the visitor’s input so they can try a fallback without starting again.
If a worker fails or takes too long, provide cancellation and a bounded input limit. If a file cannot be parsed, explain the expected format. A successful API call followed by nonsense output is still a failed task.
Make the fallback preserve the purpose
A serial chart should accept a recorded trace. An advanced file-picker demo should retain a standard file input. A GPU experiment should explain what can be done without that accelerator; a different backend is not guaranteed to have the same performance.
Good fallbacks preserve the visitor’s objective. Bad fallbacks preserve the screenshot while quietly deleting the reason the page exists.
Keep a support receipt
When reporting a result, include the tested feature, relevant environment, input, and time of observation. Separate published compatibility data from the observation made on this machine. A test that passes here is useful evidence for here.
The browser is a remarkable place to build tools. It becomes more remarkable when the tool can explain the difference between what the platform promises and what just happened.
Next: A web app you can take home turns a bounded experiment into a portable artifact.
Sources
- MDN compatibility data: Web Serial — MDN. Reviewed 15 September 2026.
- MDN compatibility data: WebGPU — MDN. Reviewed 15 September 2026.
- Web Serial API - Web APIs | MDN — MDN contributors. Reviewed 15 September 2026.
- Using Web Workers - Web APIs | MDN — MDN contributors. Reviewed 15 September 2026.
- Canvas API - Web APIs | MDN — MDN contributors. Reviewed 15 September 2026.
Put this to work
- Browser Capability Lab — Try a bounded browser operation and export what actually happened.
- Portable Mini-App Workshop — Export a converter or temperature-log inspector that runs from a local HTML file.