Web APIs C-C 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

CSS Font Loading API

The CSS Font Loading API provides events and interfaces for dynamically loading font resources.

CSS stylesheets allow authors to use custom fonts; specifying fonts to download using the @font-face rule and applying them to elements with the font-family property. Most user-agents only fetch and download fonts when they are first needed, which can result in a perceptible delay.

The CSS Font Loading API overcomes this problem by letting authors control and trakc when a font face is fetched and loaded, and when it is added to the font face set owned by the document or worker. A font face can be loaded either before or after it is added to a font face set, but it must be added to the set before it can be used for drawing.

For an example of the CSS Font Loading API in pracice, see the Font Size Adjust Project Page.

CSS Painting API

The CSS Painting API - part of the CSS Houdini umbrella of APIs - allows developers to write JavaScript functions that can draw directly into an element's background, border, or content.

Essentially, the CSS Painting API contains functionality allowing developers to create custom values for paint(), a CSS <image> function. You can then apply these values to properties like background-image to set complex custom backgrounds on an element.

CSS Properties and Values API

The CSS Properties and Values API - part of the CSS Houdini umbrella of APIs - allows developers to explicitly define their CSS custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.

CSS Typed Object Model API

The CSS Typed Object Model API simplifies CSS property manipulation by exposing CSS values as types JavaScript objects rather than strings. This not only simplifies CSS manipulation, but also lessens the negative impact on performance as compared to HTMLElement.style.

The CSS Typed Object Model API provides interfaces to interact with underlying values, by represneting them with specialized JS objects that can be manipulated and understood more easily and more reliably than string parsing and concatenation. This is easier for authors and generally faster, as values can be direcly manipulated.

Interfaces

  • CSSStyleValue: Base class of all CSS values accessible through the Typed OM API. An instance of this class may be used anywhere a string is expected.
  • StylePropertyMap: Provides a representation of a CSS declaration block that is an alternative to CSSStyleDeclaration.
  • CSSUnparsedValue: Represents property values that reference custom properties. It consists of a long list of fragments and variable references.
  • CSSKeyWordValue Serialization: This interface creates an object to represent keywords an other identifiers. You can use this to get or set the value of a CSSKeywordValue.

CSSOM

The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS Style dynamically.

Canvas API

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.
The Canvas API largely focuses on 2D graphics. The WebGL API, which alsoi uses the <canvas> element, draws hardware-accelerated 2D and 3D graphics.

Channel Messaging API

The Channel Messaging API allows two separate scripts running in different browsing contexts attached to the same focument (e.g., two IFrames, or the main document and an IFrame, two documents via a SharedWorker, or two workers) to communicate directly, passing messages between one another through two-way channels (or pipes) with a port at each end.

A message channel is created using the MessageChannel() constructor. Once created, the two ports of the channel can be accessed through the MessageChannel.port1 and MessageChannel.port2 properties (which both return MessagePort objects.) The app that created the channel uses port1, and the app at the other end of the port uses port2 - you send a message to port2, and transfer the port over to the other browsing context using window.portMessage along with two arguments. When these transferrable objects are transferred, they are no longer usable on the context they previously belonged to. A port, after it is sent, can no longer be used by the original context. The other browsing context can isten for the messae using onmessage ane grab the contents of the message using the event's data attribute. You could then respons by sending a message back to the original document using MessagePort.postMessage.

Clipboard API

The Clipboard API provides the ability tro respond to clipboard commands (cut, copy, paste), as well as to asynchronously read from and write to the system clipboard.

The system clipboard is a data buffer belonging to the operating system hosting the browser, which is used for short-term data storage and/or data transfers between documents or applications. It is usually implemented as an anonymous, temporary data buffer, sometimes called the paste buffer, that can be accessed from most all programs within the environment via defined programming interfaces.

Compression Streams API

The Compression Streams API provides a JavaScript API for compressing and decompressing streams of data using gzip or deflate formats. Built in compression means that JavaScript applications will not need to include the compression library, which makes the download size of the application smaller.

Compute Pressure API

The Compute Pressure API is a JavaScript API that enables you to observe the pressure of system resources such as the CPU.

In real-time applications, such as video conferencing web apps, the Compute Pressure API lets you detect which pressure the system is currently facing. The system will handle any stress as well as it can, but a collaboration between system and app is useful to handle the pressure best. This API notifies you of high-level pressure changes so you can adjust your workloads and still offer a pleasant user experience.
Use Cases:

  • Changing video quality depending on pressure.
  • Web games, for which you would balance the quality and amount of 3D assets, change the framerate, resolution, depth of field, to ensure low latency and stable frame rate.
  • User interfaces, for which you could render placeholders instead of real data while the system is under pressure, and render the real content once the pressure has eased.

In your web apps, different tasks are fighting for the processing time of different processing units (CPU, GPU, and other specialized processing units). The current version of the Compute Pressure API specification defines two main source types that can be queried together to gather pressure information:

  • "thermals" represents the global thermal state of the entire system
  • "cpu" reprsents the average pressure of the central processing unit (CPU) across all its cores. This state can be affected by other apps and sites than the observing site.

The compute pressure API uses human-readable pressure states with semantics, given that metrics for CPU utilization are often midleading.

Console API

The Console API provides functionality to allow the devleopers to perform debuggig tasks, such as logging essages or the values of variables at set points in your code, or timing how long an operation takes to complete.

Contact Picker API

The Contact Picker API allows users to select enries from their contact list and share limited details of the selected entries with a website or application.

The Contacts Picker API brings native application functionality to web applications. Use cases include selecting contacts to message via email or chat application, selecting a contacts phone number to use with voice over IP (VOIP), or for discovering contacts who have already joined a social platform.
When calling the select method of the ContactsManager interface, the user is presented with a contact picker, whereby they can then select contact information to share with the web application. User interaction is required before permission to display the contact picker is granted and access to contacts is not persistent; the user must grant access every time a request is made by the application.

Content Index API

The Content Index API allows developers to register their offline enabled content with the browser.

Content Indexing allows developers to tell the browser about their specific offline content. This allows users to discover and view what is available, whilst giving developers the abilitu to add and manage this content. Examples include news websites prefetching the latest articles in the background, or a content streaming app registering downloaded content. This AI is an extension of service workers.
Indexed entries do not automatically expire. It's good practice to present an interface for clearing out entries, or periodically remove older entries.

Cookie Store API

The Cookie Store API is an asynchronous API for managing cookies, available in windows and also service workers. The Cookie Store API provides an updated method of managing cookies (updated compared to document.cookie). It is asynchronous and promise-based, thereforre does not block the event loop. It does not rely on document and so is available to service workers.

Credential Management API

The Credential Management API enables a website to create, store, and retrieve credentials. A credential is an item which enables a system to make an authentication decison. We can think of it as a piece of evidence that a user presents to a website to demonstrate that they really are the person they are claiming to be.

The central interface is the CredentialsContainer, which is accessed through the navigator.credentials property and provides three main functions:

  1. create(): create a new credential
  2. store(): store a new credential locally
  3. get(): retrieve a credential, which can then be used to log a user in.