Web (Browser) API

summary

JavaScript APIs built in/for the web environment

TL;DR

• Overview: https://www.w3.org/standards/webdesign/script
• Reference: https://developer.mozilla.org/en-US/docs/Web/API

What do they do?

• interact with the DOM
• interact with the browser and the device
  • Under the hood, the browser runs low-level code (eg. C) to execute the appropriate tasks (eg. storage, audio, geolocation).

[!aside] Web API? Web platform? The Web Platform is an umbrella term for a wide range of technologies—including HTML and CSS itself—developed as open standards by the W3C and relevant standardization bodies. Thus, Web APIs are part of the Web Platform.

Best practices

• Semantic HTML
  • "Baked in" with HTML elements behaviour. Example: In all modern browsers, the <form> element fires a submit event by default when user clicks Enter.
• Security & Permissions
  • Some of these APIs are powerful and can access sensitive information, and thus require explicit user permission. See: Permissions API
• Progressive enhancement
  • Make sure to check for browser support when using cutting-edge APIs and use progressive enhancement. https://caniuse.com is your friend.

Fun(?) facts

• Web APIs are JavaScript, but are not part of the ECMAScript specification.
  • They are an extended JavaScript implementation for the web environment under the web platform. That's why we can run (eg.) Array.map in any JS environtment, but not fetch or—for obvious reason—interact with Storage.
  • Notable example: Fetch API was released in 2015. Being a Web API, it's not automatically available in Node.js environment. Developers use external library such as node-fetch that implements polyfill. Node eventually adopts it... in 2022 😬 (behind experimental flag in v17.5 at the time of writing).
  • 💡 Tip: When writing code that can run on both client and server, make sure to use a Web API on the client only.
• Some Web APIs can run outside the browser.
  • "Web environment" usually means the browser. But some APIs, eg. Workers API, run separately from the browser's main thread.
• It's up to individual browsers to adopt and release any given Web API.
  • I will never not find it funny that Mozilla’s MDN (up to when I write this) has the most thorough documentation for the Web Speech API yet Firefox does not support it. They have a demo—which they tell readers to open in Chrome.

Random complaint on terminology

Less fun part (albeit from a pedantic/nitpicky perspective): terminology.

Web API? Browser API? Web Browser API? No-one seems to agree 😾.

• FrontendMasters’ Front-end Developer Handbook uses "Web/Browser APIs"
• flaviocopes.com uses "Web Platform" as page title and "Browser APIs" as tag name for the posts category archive
• To make it even more ambiguous, MDN Web Docs in “Introduction to web APIs” uses "web APIs" (lowercase w) to refer to any API that can be used on the web, including third-party APIs. This page refers to APIs from the Web API reference as "browser APIs", which is not incorrect for the most part, but... seriously? 😩

In the interest of keeping things simple:

• This note is titled "Web (Browser) APIs" for the hypothetical SEO juice.
• Any mention of "Web API" throughout this site refers to APIs in https://developer.mozilla.org/en-US/docs/Web/API.