Web APIs K-P 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

Launch Handler API

The Launch Handler API allows developes to control how a progressive web app is launched - for example if it creates a new one, and the app's launch target URL is handled.

You can specify launch behavior by adding the launch_handler field to your web app manifest file. This has one sub-field, client_mode, which contains a string value specifying how the app should be launched and navigated to.

Local Font Access API

The Local Font Access API provides a mechanism to access the user's locally installed font data - this includes higher-level details such as names, styles, and families, as well as the raw bytes of underlying font files.

High-end design tools have historically been difficult to deliver on teh web, due to challenges in accurate font enumeration and accessing low-level font data (for example, to apply filters and transformations). Current apps often rely on workarounds such as asking users to upload their fonts to a server where they are processed to get raw byte data or installing a separate local program to provide additional capabilities.

The Local Font Access API has been created to address these problems. The Window.queryLocalFonts() method provides access to an array of locally installed fonts, each represented by a FontData object instance. FontData has several properties providing access to names, styles, and families.

Media Capabilities API

The Media Capabilities API allows developers to determine decoding and encoding abilities of the device, exposing information such as whether media is supported and whether playback should be smooth and power efficient, with real time feedback about playback to better enable adaptive streaming, and access to display property information.

There are a myriad of video and audio codecs. Different browsers support different media types and new media types are always being developed. With the Media capabilities API, developers can ensure each user is getting the best bitrate and storage savings for their browser, device and OS capabilities. The Media Capabilities API enables determining which codecs are supported and how performant a media file will be in terms of smoothness and power efficiency. The Media API provides abilities to display property information such as supported color gamut, dynamic range abilities, and real-time feedback about the playback.

Media Capture and Stream

The Media Capture and Streams API (aka Media Streams API or MediaStream API) is an API related to WebRTC which provides support for streaming audio and video data.

It provides interfaces and methods for working with the streams and their constituent tracks, the constraints associated with data formats, the succes and error callbacks when using the data asynchronously abd the events that are fired during the process. The API is based on the manipualtion of the MediaStream object representing a flux of audio- or video-related data. A MediaStream consists of zero or more MediaStreamTrack objects, representing various audio or video tracks. Each MediaStreamTrack may have one or more channels. The channel representing reprsents the smallest unit of a media stream, such as an audio signal associated with a given speaker, like left or right in a stereo audio track.

MediaStream objects have a single input and a single output. A MediaStream object generated by getUserMedia() is called local, and has its source input one of the user's cameras or microphones.

Media Session API

The MediaSession API provides a way to customize media notifications. It does this by providing metadata for displaying by the user agent for the media your web app is playing. It also provides action handlers that the browser can use to access platform media keys such as hardware keys found on keyboards, remote controls, and software keys found in notification areas and on lock screens of mobile devices. So you can seamlessly control web-provided media via your device, when when not looking at the web page. The aim is to allow users to know what is playing and to control it, without needing to open the specific page that launched it. To be able to support the Media Session API, a browser first needs a mechanism by which to access and be controlled by the OS-level media controls.

The MediaMetadata interface lets a website provide rich metadata to the platform UI for media that is playing. This metadata includes the title, artist (creator) name, album (collection), artwork, and chapter information. The platform can show this metadata in media centers, notifications, device lock screens, and so on.

The MediaSession interface lets users control the playback of media through user-agent defined interface elements. Interactions with these elements trigger action handlers on the web page playing the media.

Media Source Extensions

The Media Source API, formally known as Media Source Extensions (MSE) provides functionality enabling plugin-free web-based streaming media. Using MSE, media streams can be created via JavaScript, and played using <audio> and <video> elements.

MSE allows us to replace the usual single progressive src URI ded to media elements with a reference to a MediaSource object, which is a container for information like the ready state for media being played, and references to multiple SourceBuffer objects that represent the different chunks of media that make up the entire stream.

If you do not require explicit control of video quality over time, the rate at which content is fetched, or the rate at which memory is evicted, then the <video> and <audio> tags may well be a simple and adequate solution.

Dynamic-Adaptive Streaming over HTTP (DASH) is a protocol for specifying how adaptive content should be fetched. It is effectively a layer built on top of MSE for building adaptive bitrate streaming clients. While there are other protocols available, DASH has the most platform support. DASH moves lots of logic out of the network protocol and into the client side application logic, using the simpler HTTP protocol to fetch files. One can support DASH with a simple static file server, which is also great for CDNs. This is in direct contrast with previous streaming solutions that require expensive licenses for proprietary non-standard client/server protocol implementations. The two most common use cases for DASH involve watching content "on demand" or "live". On demand allows a developer to take their time transcoding the assets into multiple resolutions of various quality. Live profile content can introduce latency due to its transcoding and broadcasting, so DASH is not suitable for real time communication like WebRTC is.

MediaStream Recording

The MediaStream Recording API, sometimes referred to as the Media Recording API or the MediaRecorder API, is closely affiliated with the Media Capture and Streams API and the WebRTC API. The MediaStreamRecording API makes it possible to capture the data generated by MediaStream or HTMLMediaElement object for analysis, processing, or saving to disk.

The MediaStream Recording API is comprised of a single major interface, MediaRecorder, which does all the work of taking the data from a MediaStream and delivering it to your for processing. The data is delivered by a series of dataavailable events, already in the format you specify when creating the MediaRecorder.
Process of Recording a Stream:

  1. Set up a MediaStream or HTMLMediaElement to serve as the source of the media data.
  2. Create a MediaRecorder object, specifying the source stream and any desired options.
  3. Set ondataavailable to an event handler for the dataavailable event; this will be called whenever data is available for you.
  4. Once the source media is playing and you've reached the point where you're ready to record video, call MediaRecorder.start() to begin recording.
  5. Your dataavailable event handler called every time ther's data ready for you to do with as you will; the event has a data attribute whose value is a Blob that contains the media data.
  6. Recording stops automatically when the source media stops playing.
  7. You can stop recording at any time by calling MediaRecorder.stop().

Navigation API

The Navigation API provides the ability to initiate, intercept, and manage browser navigation actions. It can also examine an application's history entries. This is a successor to previous web platform features such as the History API and window.location. [This API is aimed at the needs of single-page applications (SPAs).]

The Navigation API is accessed via the Window,navigation property, which returns a reference to a global Navigation object. Each window object has its own corresponding navigation instance. The navigation interface has several associated events, the most notable being the navigate event. This is fired when any type of navigation is initiated, meaning that you can control all page navigations from one central place, ideal for routing functionality in SPA frameworks. Ad the user navigates through your application, each new location navigates to results in the creation of a navigation history entry. Each history entry is represented by a distinct NavigationHistoryEntry object instance.

Network Information API

The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.). This can be used to select high definition content or low definition content based on the user's connection.

The interface consists of a single NetworkInformation object, an instance of which is returned by the Navigator.connection property or the WorkerNavigator.connection property. The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading video may not be desirable.

Page Visibility API

The Page Visibility API provides events you can watch for to know when a document becomes visible or hidden, as well as features to look at the current visibility state of the page. This is especially useful for saving resources and improving performance by letting a page avoid performing unnecessary tasks when the document isn't visible.

When the user minimized the window, switches to another tab, or the document is entirely obscured by another window, the API sends a visibilitychange event to let listeners know the state of the page has changed. You can detect event and perform some actions or behave differently.

Payment Handler API

The Payment Handler API provides a standardized set of functionality for web applications to directly handle payments, rather than having to be redirected to a separate site for payment handling.

When a merchant website initiates payment via the Payment Request API, the Payment Handler API handles discovery of applicable payment apps, presenting them as choices to the user, opening a payment handler window once a choice has been made to allow the user to enter their payment details, and handling the payment transaction with the payment app. Communication with payment apps is handled via Service Workers.

Payment Request API

The Payment Request API provides a consistent user experience for merchants and users. It is not a new way of paying for things; instead, it's a way for users to select their preferred way of paying for things and make that information available to a merchant.

The Payment Request API is meant to reduce the steps needed to complete payment online, potentially doing away with checkout forms. It aims to make the checkout process more accessible by having payment apps store a suer's details, which are passed along to a merchant, hopefully without requiring an HTML form.

Performance API

The Performance APU is a group of standards used to measure the performance of web applications.

To ensure web applications are fast, it's important to measure and analyze various performance metrics. The Performance API provides important built-in metrics and the ability to add your own measurements to the browser's performance timeline. The performance timeline contains high precision timestamps and can be displayed in developer tools. Each performance metric is represented by a single PerformanceEntry. A performance entry has a name, a duration, a startup, and a type. All performance metrics extend the PerformanceEntry interface and qualify it further.

Performance Entry

Periodic Background Sync

The Web Periodic Background Synchronization API provides a way to register tasks to be run in a service worker at periodic intervals with network connectivity. These tasks are referred to as periodic background sync requests.

The Periodic Background Sync API allows web applications to alert their service worker to make any updates, at a periodic time interval. Uses may include fetching latest content whilst a device is connected to Wi-Fi, or allowing background updates to an application. The PeriodicSyncManager interface is available through ServiceWorkerRegistration.periodicSync. A unique tag identifier is set to 'name' the sync event, which can the be listened for within the ServiceWorker object.

Permissions API

The Permissions API provides a consistent programmatic way to query the status of API permissions attributed to the current context, such as a web page or worker. For example, it can be used to determine if permission to access a particular feature or API has been granted, denied, or requires specific user permission.

The Permissions API provides the tools to allows developers to implement a consistent user experience for working with permissions. The permissions from this APU effectively aggregate all security restrictions for the context, including any requirement for an API to be used in a secure context, Permissions-Policy restrictions applied to the document, requirements for user interaction, and user prompts. The permissions policy has been made available on the Navigator object, both i the standard browsing context and the worker context, and returns a Permissions object that provides access to the Permissions API functionality. Once you have this object you can then use the Permissions.query() method to return a promise that resolves with the PermissionsStatus for a specific API.

If the permission status is prompt, the user must acknowledge a prompt to grant access to this feature. The mechanism that triggers this prompt will depend on the specific API - it is not defined as part of the Permissions API.

Picture-in-Picture API

The Picture-in-Picture API allow websites to create a floating, always on top video window. This allows users to continue consuming media while they interact with other sites or applications on their device.

The Picture-in-Picture API adds methods to the HTMLVideoElement and Document interfaces to allow toggling out of the floating video window.

Pointer Event

Much of today's web content assumes the user's pointing device will be a mouse. However, since many devices support other types of pointing input devices, such as pen/stylus and touch surfaces, extensions to teh existing pointing device event models are needed. Pointer events address that need.

Pointer events are DOM events that are fired for a pointing device, They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus, or touch (such as one or more fingers). The pointer is a hardware-agnostic device that can target a specific set of screen coordinates. Having a single event model for pointers can simplify creating websites and applications and provide a good user experience regardless of the user's hardware. The events needed to handle generic pointer input are analogous to mouse events (mousedown/pointerdown,mousemove/pointermove,etc.). A pointer event contains the usual properties present in mouse events in addition to new properties for other forms of input: pressure, contact geometry, titlt, etc.

Terminology

active button state
The condition when a pointer has a non-zero value for the buttons property.
active pointer
Any pointer that can produce events. A pointer is considered active if it can still produce further events.
digitizer
A sensing device with a surface that can detect content. Most commonly, the sensing device is a touch-enabled screen that can sense input from an input device such as a pen, stylus, or finger. Some sensing devices can detect the close proximity of the input device, and the state is expressed as a hover following the mouse.
hit test
The process the browser uses to determine a target element for a pointer event. Typically, this is determined by considering the pointer's location and the virtual layout of elements in a document.
pointer
A hardware-agnostic representation of input devices that can target a specific coordinate (or set of coordinates) on a screen. Examples of pointer input devices are mouse, pen/stylus, and touch contacts.
pointer capture
Pointer capture allows the events for a pointer to be retargeted to a a particular element other than the normal hit test result of the pointer's location.
pointer event
A DOM event fired for a pointer

For scenarios where there can be multiple pointers, the application uses the isPrimary property to identify a master pointer among a set of active pointers for each pointer type. The touch-action CSS property is used to specify whether or not the browser should apply its default touch behavior to a region.

Pointer Lock API

The Pointer Lock API provides input methods based on the movement of the mouse over time, not just the absolute position of the mouse cursor in the viewport. It gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view. It is ideal for 3D games.

The API is useful for any application that requires significant mouse input to control movements. Pointer lock lets you access mouse events even when the cursor goes past the boundary of the browser or screen. Pointer lock is different from pointe capture in that it is persistent, it is not limited by browser or screen boundaries, it continues to send events regardless of mouse button state and it hides the cursor.

Popover API

The Popover API provides developers with a standard, consistent, flexible mechanism for displaying content on top of other page content. Popover content can be controlled using HTML attributes or via JavaScript.

Two types of popovers:

  • modal, meaning that while a popover is shown, the rest of the page is rendered non-interactive until the popover is actioned on some way (for example, an important choice is made)
  • non-modal, meaning that the rest of the page can be interacted with while the popover is being shown

Popovers created using the Popover API are always non-modal. Typical use cases for the popover API include user-interactive elements like action menus, custom "toast" notifications, form element suggestions, content pickers, or teaching UI.

Presentation API

The Presentation API lets a user agent (such as a Web browser) effectively display web content through large presentation devices such as projects and network connected televisions.
Presentation API

In general, a web page uses the Presentation Controller API to specify the web content to be rendered on presentation device and initiate teh presentation session. With Presentation Receiver API, the presenting web content obtains the session status.

  • For 1-UA mode devices, both pages are are loaded by the same user agent. However, rendering result of the receiver page will be sent to the presentation device via supported remote rendering protocol.
  • For 2-UA mode device, the receiver page is loaded directly on the presentation device. Controlling user agent communications with presentation device via supported presentation control protocol, to control the presentation session and transmit the message between two pages.

Prioritized Task Scheduling API

The Prioritized Task Scheduling API provides a standardized way to prioritize all tasks belonging to an application, whether they are defined in a website develop's code or in third-party libraries and frameworks.

The task priorities are very coarse-grained and based around whether tasks block user interaction or otherwise impact the user experience, or can run in the background. Developers and frameworks may implement more fine-grained prioritization schemes within the broad categories defined by the API. The Prioritized Task Scheduling API is available in both window and worker threads using the scheduler property on the global object.

Push API

The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in thr foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content.

For an app to receive push messages, it has to have an active service worker. When the service worker is active, it can subscribe to push notifications, using PushManager.subscribe(). The resulting PushSubscription includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data. The service worker will e started as necessary to handle incoming push messages, which are delivered to the onpush event handler. This allows apps to react to push messages being received, for example, by displaying a notification (using ServiceWorkerRegistration.showNotification()).

Each subscription is unique to a service worker. The endpoint for the subscription is a unique capability URL: knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret, or other applications might be able tos end push messages to your application.

Activating a service worker to deliver push message can result in increased resource usage, particularly of the battery.