Web APIs G-I Page

Why Create This Page

I created this page because when implementing Notifications and the Service Worker for this website, I came across the mdn web docs page on Web APIs, and I noticed how many Web APIs I haven't tried out that looked interesting. I am going to use this page to learn more about the Web APIs and implement them to test their functionality. Because there are 137 Web APIs available, I am going to paginate this project so that one page does not have too much information.

Navigate Web APIs

Geolocation API

The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information. Web Extensions that wish to use the Geolocation object must add the "geolocation" permission totheir manifest. The user's operating system will prompt the user to allow location access the first time it is requested.

The Geolocation APU is accessed via a call to navigator.geolocation; this will cause the user's browser to ask them for permission to access their location data. If they accept, then the browser will use the best available functionality on the device to access this information (for example, GPS).The developer can now access this information in a couple different ways:

  • Geolocation.getCurrentPosition(): Retrieves the device's current location.
  • Geolocation.watchPosition(): Registers a handler function that will be called automatically each time the position of the device changes, returning the updated location.

Geometry Interface

Geometry interface is a CSS module that provides interfaces for working with 3D and 2D graphics - in particular, for working with points, rectangles, quadrilaterals, and transformation matrices (for operations that translate/move, scale, rotate, skew/shear/slant, and flip graphics, as well as for multiplying/chaining and inverting/undoing these operations).

As a web developer, you don't always use the geometry interfaces directly, but instead use other features that rely on them behind the scenes.

HTML DOM

The HTML DOM API is made up of the interfaces that define the functionality of the elements in HTML, as well as any supporting types and interfaces they rely upon.

The functional area included in the HTML DOM API include:

  • Access to and control of HTML elements via the DOM.
  • Access to and manipulation of form data.
  • Interacting with the contents of 2D images and the context of an HTML <canvas>
  • Management of media connected to the HTML media elements.
  • Dragging and dropping of content on webpages.
  • Access to the browser navigation history.
  • Supporting and connective interfaces for other APIs

The Document Object Model (DOM) is an architecture that describes the structure of a document; each document is represented by an instance of the interface Document. A document, in turn, consists of a hierarchical tree of nodes, in which a node is a fundamental record representing a single object within the document. Each node is based on the Node interface, which provides properties for getting information about the node as well as methods for creating, deleting, and organizing nodes within the DOM. Nodes don't have any concept of including teh content that is actually displayed in the doucment. They're empty vessels. The fundamental notion of a node that can represent visual content is introduced by the Element interface. An Element object instance represents a single element in a document created using either HTML or an XML vocabulary such as SVG.

Document Object Model

The Element interface has been further adapted to represent HTML elements specifically by introducing the HTMLElement interface, which all more specific HTML element classes inherit from. Every Element is a Node but not the other way around. An element inherits the properties and methods from all of its ancestors.

Inheritance of HTML Elements

HTML Drag and Drop API

HTML Drag and Drop interface enables applications to use drag-and-drop features in browsers. The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button. A translucent representation of the draggable elements follows the pointer during the drag operation.

Making an element draggable requires the draggable attribute and the dragstart event handler. The application is free to include any number of data items in a drag operation. Each data item is a string of a particular type. Each DragEvent has a dataTransfer property that holds the event's data. This property has methods to manage drag data. The dropEffect is used to control the feedback the user is given during the drag-and-drop operation. To change the behavior so that an element becomes a drop zone or is droppable, the element must listen to both dragover and drop events. At the end of the drag operation, the dragend event fires at the source element - the element that was the target of the drag start.

History API

The History API provides access to the browser's session history (not to be confused with WebExtensions history) through the history global object. It exposes useful methods and properties that let you navigate back and forth through the user's history, and manipulate the contents of the history stack.

Houdini API

Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layour process of a browser's rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM) enabling developers to write code the browser can parse as CSS, thereeby creating new CSS features without waiting for them to be implemented natively in browsers.

Houdini enables faster parse times than using JavaScript HTMLElement.style for style changes. Browsers parse the CSSOM - including layout, paint, and composite processes - before applying any style updates found in scripts. A feature of CSS Houdini is the Worklet. With worklets, you can create modular CSS, requiring a single line of JavaScript to import configurable components: no pre-processors or JavaScript frameworks needed.

Idle Detection API

LIMITED AVAILABILITY, The Idle Detection API provides a means to detect the user's idle status, active, idle, locked, specifically, and to be notified of changes to idle status without polling from a script.

Native applications and browser extensions use idle detection base user experiences on when a user is interacting with a device. For example, chat applications can show other users of an application whether someone is available.

Image Capture API

The MediaStream Image Capture API is an API for capturing images or videos from a photographic device. In addition to capturing data, it allows you to retrieve information about device capabilities such as image size, red-eye reduction and whether ro not there is a flash and what they are currently set to. The API allows the capabilities to be configured within the constraints what the device allows.

IndexedDB

IndexedDB is a low-level API for client-side storage of signifant amounts of structured data, including files/blobs. This API uses indexes to enable high performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution.

IndexedDB is a transactional database system, like an SQL-based Relational Database Management System (RDBMS). However, unlike SQL-based RDBMSes, which use fixed-column tables, IndexedDB is a JavaScript-based object-oriented database. IndexedDB lets you store and retrieve objects that are indexed with a key; any objects supported by the structured clone algorithm can be stored. You need to specify the database schema, open a connection to your database, and then retrieve and update data with a series of transactions. Operations performed using IndexedDB are done asynchronously, so to not block applications.

Ink API

The Ink API allows browsers to directly make use of available OS-level compositors when drawing pen strokes in an inking app feature, thereby reducing latency and increasing performance.

Inking on the web refers to app features that involve using pointer events to draw a smooth pen stroke. Pointer events are usually sent first to the browser process, which then forwards these event sto the JavaScript event loop to execute their associated handler functions and render the result in the app. The time delay between the start and end of this process can be significant. The Ink API significantly reduced this latency by allowing browsers to bypass the JavaScript loop entirely. Where possible, browsers will pass such rendering instructions directly to OS-level compositors.

Input Device Capabilities API

The InputDeviceCapabilities API provides details about the underlying sources of input events. The API attempts to describe how the device behaves rather than what it is. For example, the first version of the API indicates whether a device fires touch events rather than whether it is a touch screen.

Because DOM events abstract device input, they provide no way to learn what device fired an event. This can lead to instances where the same action triggers multiple event handlers. The InputDeviceCapabilities API addresses this problem by abstracting the capabilities of input devices. 

myButton.addEventListener("mousedown", (e) => {
// Touch event case handled above, don't change the style again on tap.
if (!e.sourceCapabilities.firesTouchEvents) myButton.classList.add("pressed");
});

Insertable Streams for MediaStreamTrack API

The Insertable Streams for MediaStreamTrack API provides a method of adding new components to a MediaStreamTrack.

When processing video or audio, you sometimes want o insert additional elements or otherwise process the stream. This API provides a method to manipulate sreams by gibing direct access to the stream, allowing it to be manipulated. 

const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: "video" });

const transformer = new TransformStream({
    async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
    },
});

trackProcessor.readable
    .pipeThrough(transformer)
    .pipeTo(trackGenerator.writable);

Intersection Observer API

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. Historically, detetcing visibility of an element, or the relative visibility of two elements in relation to each other, has been a difficult task for which solutions have been unreliable and pone to causing th browser and the site the user is accessing to become slugfgish. As the web has matured, the need for this kind of information has grown. Intersection information is needed for reasons such as:
  • Lazy loading of images and other content as a page is scrolled.
  • Implementing infinite scrolling websites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.
  • Reporting of visibility of advertisements in order to calculate ad revenues.
  • Deciding whether or not to perform tasks and animation processes based on whether or not the user will see the result.

The Intersection Observer API lets code register a callback function that is executed whenever a particular element enters or exits an intersection with another element, or when the intersection between two elements changes by a specific amount. This way, sites no longer need to do anything on the main thread to watch for this kind of element intersection, and the browser is free to optimize the management of intersections as it sees fit.

Invoker Commands API

The Invoker Commands API provides a way to declaratively assign behaviors to buttons, allowing control of interactive elements when the button is enacted (clicked or invoked via a keypress, such as the spacebar or return key).

A common pattern on the wbe is to have a <button> elements control various elements of the page, such as opening and closing of popovers or <dialog> elements. These commands have required JavaScript, but this API allows functionality to occur through HTML attributes. 

<button commandfor="mydialog" command="show-modal">Show modal dialog</button>
<dialog id="mydialog">
    <button commandfor="mydialog" command="close">Close</button>
    Dialog Content
</dialog>