Web APIs T-V 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

Touch Event

To provide quality support for touch based user interfaces, touch events offer the ability to interpret finger (or stylus) activity on touch screens or trackpads.

The touch events interfaces are relatively low-level APIs that can be used to support application-specific multi-touch interactions such as a two-finger gesture. Touch events are similar to mouse events except they support simultaneous touches and at different locations on the touch surface.

Trusted Types API

The Trusted Types API gives web developers a way to lock down the insecure parts of the DOM API to prevent client-side Cross-site scripting (XSS) attacks.

Client-side, or DOM-based, XSS attacks happen when data controlled by a user reaches a function that can execute that data. These functions are known as injection sinks. DOM-bases XSS attacks happen when a user is able to write arbitrary JavaScript code and have it executed by one of these functions. The Trusted Types API locks down risky injection sinks, requiring you to process the data before passing it to one of these functions. Trusted types works alongside Content-Security-Policy wth the trusted-types and require-trusted-types-for directives.

UI Event

The UI Events API defines a system for handling user interactions such as mouse and keyboard input. This includes:
  • Events that are fired on specific user actions such as keypresses or mouse clicks/
  • Event interfaces, which are passes into handlers for these events.

URL API

The URL API is a component of the URL standard, which defines what constitutes a valid Uniform Resource Locator and API that accesses and manipulates URLs. The URL standard also defines concepts such as domains, hosts, and IP addresses, and also attempts to describe in a standard way the legacy application/x-www-urlencoded MIME type used to submit web forms' content.

URL Fragment Text Directive

The URL fragment text directives API allows web apps to interact with text fragments. Text fragments allow linking directly to a specific portion of text in a web document, without requiring the author to annotate it with an ID, using a particular syntax in the URL fragment.

URL Pattern API

The URL Pattern API defines a syntax that us used to create URL pattern matchers. These patterns can be matched against URLs or individual URL components. The URL Pattern API is used by the URLPattern interface.

The pattern syntax is based on the syntax from the path-to-regexp library.

User-Agent Client Hints API

The User Agent Client Hints API exteds Client Hints to provide a way of exposing browser and platform information via User-Agent response and request headers, and a JavScript API.

Parsing the User-Agent string has historically been the way to get information about the user's browser or device. User agent Client Hints aims to provide this information in a more privacy preserving way by enforcing a model where the server requests a set of information. The browser decides what to return.

Vibration API

Most modern mobile devices include vibration hardware, which lets software code provide physical feedback to the yser by causing the device to shake. The Vibration API offers Web Apps the ability to access this hardware, if it exists, and does nothing if the device doesn't support it.

Vibration is described as a pattern of on-off pulses, which may be of varying lengths. The pattern may consist of either a single integer, describing the number of milliseconds to vibrate, or an array of integers describing a pattern of vibrations and pauses.

View Transitions API

The View Transitions API provides a mechanism for easily creating animated transitions between different website views. This includes animation between DOM states in a single page app (SPA), and animating the navigation between documents in a multi-page app.

View Transitions are a popular design choice for reducing user's cognitive load, helping them stay in context, and reducing perceived loading latency as they move between states or views of an application.

VirtualKeyboard API

The VirtualKeyboard API provides developers control over the layout of their applications when the on-screen virtual keyboard appears and disappears on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.
VirtualKeyboard

More complex applications or specific devices such as multi-screen mobile phones may required more control of the layout when the virtual keyboard appears. The VirtualKeyboard API can be used to opt out of the way the browser automatically handles the virtual keyboard, and take full control of it instead. With the VirtualKeyboard APU, the keyboard still appears and disappears as necessary when form controls are focused, but the viewport does not change, and you can use JavaScript and CSS to adapt your layout.

Visual Viewport

The Virtual Viewport API provides an explicit mechanism for querying and modifying the properties of the window's visual viewport. The visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any on-screen artifact that doesn't scale with the dimensions of a page.

The mobile web contains two viewports, the layout viewport and the visual viewport. The layout viewport covers all the elements on a page and the visual viewport is what is actually visible on the screen. When the user pinch-zooms into the page, the visual viewport shrinks but the layout viewport is uchanged.