[WIP] A tour of web capabilities

This post compiles notes from Max Firtman's course in Frontendmasters.

• What is a capability? The ability of a web browser to perform an action using typically a built-in API. Compatibility can be an issue, of course. So some of the capabilities may not be available in some browsers.
• Maturity of the capabilities: green (mature), light-green (may not be available in every browse. Normally chromium-based browsers vs Firefox/Safari), yellow (not mature and only available in some browsers), red (you can't use them and may be added in the long term).
• Resources to check the capabilities: MDN, caniuse.com, web.dev, webkit.org/blog (specifically for Safari), chromestatus.com, web.dev/baseline (multivendor, define a list of stable capabilities, stable version for the web, one list per year starting in 2022).
• Core capabilities NOT covered in this course: fetch, web workers (for threading), WebAssembly, WebSocket, WebRTC, WebPerformance APIs, Network information (see course here), Device memory, WebOTP (one-time password), Web Crypto (cryptography), storage (another course), Web Components, CSS, 2D Canvas, WebGL, Pointer Lock (for gaming), screen capture, PWA (course), page visibility, background sync, background fetch, web push, and notifications, media session (all these in the course), Web Authentication, passkeys, credential management, (all these in the course).
• Permissions: some are harmless, others have a privacy risk or have a cost. If there is a cost or risk some browsers may limit it: user engagement requirements or permission dialog to the user. Most will require HTTPS. Some capabilities will need the user interaction to be enabled (aka you can't trigger it on page load). Permissions are granted on an origin base (domain). If the user denies permission, the API won't be able to ask again, manual re-enablement is required. Permission may have no time limit or it may be limited by time or session or usage. They are enabled for the main navigation (the HTML document that was loaded) - it won't be available for iframes. If you want to turn a capability off: permission policy spec, it's an HTTP header (Permissions-Policy), for an iframe it's an HTML attribute.

Capabilities

Permissions API

• 1. https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API

Sensors, Geolocation, and Input Devices

• Sensors on mobile devices: accelerometer (3 axis - x, z, y), gyroscope (turning the phone - alpha, beta, gamma), magnetometer (compass), proximity (to the user), light sensor.
• 2. Two ways to consume them on the web: old APIs (global DOM APIs, that is how you need to do it in iPhones and iPads. It only supports magnetometer, gyroscope, and accelerometer. Done with event listeners. i.e. devicemotion and deviceorientation (MDN docs here) and here. They need user permission), Sensor API (not yet in Safari nor Firefox, see MDN).
• 3. Geolocation API (one of the first capabilities on the web). Google, Apple, etc. know your location because of WiFi - your devices know which WiFis are around and these companies can locate you because they have a database of SSIDs and their location. The API will give you the location, it's provider-agnostic (wifi, GPS, etc.). Works only in the foreground - won't work in the background/workers. Since the API is old, it's callback-based (no promises). MDN docs here.