Web APIs D-F 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

Device Memory API

The capabilities of a client device largely depend on the amount of available RAM. Traditionally, developers had to use heuristics and either benchmark a device or infer device capbilities based on other factors like the device manufacturer or User Agent strings.

You can query the approximate amount of RAM a device has by retrieving Navigator.deviceMemory or WorkerNavigator.deviceMemory.

Device Orientation Events

Device orientation events are events that allow you to detect a device's physical orientation as well as allowing you to detect the device's motion.

Mobile devices commonly have sensors such as gyroscopes, compasses, and accelerometers that can enable applications running on the device to detect the device's orientation and motion. The device orientation events able you to write web applications that can change their behavior based on the orientation of the user's device, and that can react when the user moves their device.

Document Picture-in-Picture API

The Document Picture-in-Picture API makes it possivle to open an always-on-top window that can be populated with arbitrary HTML content - for example a video with custom controls or a set of streams showing the participants of a video conference call. It extends the earlier Picture-in-Picture API for <video>, which specifically enables an HTML <video> element to be put into an always-on-top window.

It is often helpful to have a different window available to a web app in addition to the main window in which the app is running. You might want to browse other windows while keeping specific app content in view, or you might want to give that content its own space while keeping the main app window feed up to display other content. This API only works in Microsoft Edge, so I am going to move on.

EditContext API

The EditContext API can be used to build rich text editors on the web that support advanced text input experiences, such as Input Method Editor (IME) composition, emoji picker, or any other platform-specific editing-related UI surfaces.

With the EditContext API, you get the flexibility to render your own editable text region with any technology you want. If you decide to implement your own editable region, whether it draws text into a <canvas> or renders it into a series of DOM elements, you are responsible for providing the things that the browser would normally provide if you were using a <textarea> instead:

  • Rendering the text
  • Rendering the selection
  • Letting the OS text input service know when the selection changes.
  • Letting the OS text input service know where the text is located in the UI, so the input method software can display the IME composition window in the correct location.
  • Applying certain text formats.

Encoding API

The Encoding API provides a mechanism for handling text in various chracter encodings, uncluding lgeacy non-UTF-8 encodings.

The API provides 4 interfaces:

  1. TextDecoder
  2. TextEncoder
  3. TextDecoderStream
  4. TextEncoderStream

Encrypted Media Extension

The Encrypted Media Extensions API provides interfaces for controlling the playback of content which is subject to digital restrictions management scheme.
Access to this API is provided through Navigator.requestMediaKeySystemAccess().

EyeDropper API

The EyeDropper API provides a mechanism for creating an eyedropper tool. Using this tool, users can sample colors from their screens, including outside of the browser window.

Creative applications often allows users to sample colors from drawings or shapes in the application to reuse. Web applications can use the EyeDropper API to provide a similar eyedropper mode, provided by the browser.

FedCM API

The Federated Credential Manager API (or FCM API) provides a standard mechanism for identity providers (idPs) to make identity federation services available on the wbe in a privacy-prserving way, without the need for third-party cookies and redirects.

Identity Federation is the delegation of user authentication from a website requiring user sign-up or sign-in, such as an e-commerce or social networking site (also known as a relying party or RP), to a trusted third-party identity provider (IdP) such as Google, Facebook/Meta, GitHub, etc. Relying parties can register with IdPs, allowing users to sign-in using the accounts they have registered with the IdP.
FedCM provides a dedicated mechanism for federated identity flows on the web, enabling supporting browsers to provide special UI elements on RPs, allowing users to choose an IdP account to use for sign-in.

Fenced Frame API

The FencedFrame API provides functionality for controlling content embeeded in <fencedframe> elements.

One major source of privacy and security problems on the web is content embedded in <iframe> elements. Historically, these elements have been used to set third-party cookies which can be used to share information and track users across sites. <fencedframe> elements aim to solve problems with iframes in that:

  • Communication cannot be shared between the fenced frame content and its embedding site.
  • A <fencedframe> can access cross-site data, but only in a very specific set of controlled circumstances that preserve user privacy.
  • A <fencedframe> cannot be freely manipulated or have its data acessedvia regular scripting.
  • A <fenced-frame> cannot access the embedding context's DOM, bor can the embedding context access the frame's DOM.

Fetch API

The Fetch API provides an interface for fetching resources (including across the network). It is a more powerful and flexble replacement for XMLHttpRequest.
  • The Fetch API uses Response and Reuqest objects, as well as related concepts such as CORS and HTTP Origin Header semantics.
  • fetch() can work in both Widow and Worker contexts.
  • It returns a Promise and resolves to a Response.

File API

The File API enables web applications to access files and their contents. Web applications can access files when the user makes them available, either using a file <input> element or via drag and drop.

Sets of files made avalable this way are represented as FileList objects, which enable a web application to retrieve individual File objects. In turn, File objects provide access to metadata such as the file's name, size, type, and last modified date. File objects can be passed to FileReader objects to access the contents of the file. the FileReader interface is asynchronous, but a synchronous version, available only in web workers, is provided by the FileReaderSync interface.

File System API

The File System API - with extensions provided via the File System Access API to access files on the device file system - allows read, write and file management capabilities.

This API allows interaction with files on a user's local device, or ona user-accessible network file system. Core functionality of this API includes reading, writing, or saving files, and access to directory structure. Most of the interaction with files and directories is accomplished through handles. A parent FileSystemHandle class helps define two child classes: FileSystemFileHandle and FileSystemDirectoryHandle, for files and directories respectively. The handles represent a file or directory on the user's system. You can first gain access to them by showing the user a file or directory picker using methods such as window.showOpenFilePicker() and window.showDirectoryPicker(). Once these are called, the file picker presents itself and the user selects either a file or a directory. Once this happens successfully, a handle is returned.

Each handle provides its own functionality and there are a few differences depending on which one you are using. You can access file data, or information of the directory selected. This API opens up potential functionality the web has been lacking. Access to the API is disallowed unless the user specifically permits it.

The origin private file system (OPFS) is a storage endpoint provided as part of the File System API, which is private to the origin of the page and not visible to the user like the regular file system. It provides access to a special kind of file that is highly optimized for performance ond offers in-place write access to its content.

File and Directory Entries API

The File and Directory Entries APU simulates a local file system that web apps can navigate within and access files in. You can develop apps which read, write, and create files and/or directories in a virtual, sandboxed file system.

There are two ways to get access to file systems defined in the cuurrent specification draft:

  1. When handling a drop event for drag and drop, you can call DataTransferItem.webkitGetAsEntry() to get the FileSystemEntry for a dropped item.
  2. The HTMLInputElement.webkitEntries property lets you access the FileSystemFileEntry objects for the currently selected files, but only if they are dragged and dropped onto the file chooser.

Force Touch Events

NON STANDARD WARNING
Force Touch Events are a proprietary, Apple-specific feature which makes possible (where supported by the input hardware) new interactions based on how hard the user clicks or presses down on the touchscreen or trackpad.

Fullscreen API

The Fullscreen API adds methods to present a specific Element (and its descendants) in fullscreen mode, and to exit fullscreen mode once it is no longer needed. This makes it possible to present desired content - such as an online game - using the user's entire screen, removing all browser user interface elements and other applications from the screen until fullscreen mode is shut off.