Chromium Blog: Chrome 89 Beta: Advanced Hardware Interactions, Web Sharing on Desktop, and More

Chrome 89 Beta: Advanced Hardware Interactions, Web Sharing on Desktop, and More

Thursday, January 28, 2021

Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on ChromeStatus.com. Chrome 89 is beta as of January 28, 2021.WebHID APIThere is a long tail of human interface devices (HIDs) that are too new, too old, or too uncommon to be accessible by systems' device drivers. The WebHID API solves this by providing a way to implement device-specific logic in JavaScript. A human interface device is one that takes input from or provides output to humans. Examples of devices include keyboards, pointing devices (mice, touchscreens, etc.), and gamepads.The inability to access uncommon or unusual HID devices is particularly painful, for example, when it comes to gamepad support. Gamepad inputs and outputs are not well standardized and web browsers often require custom logic for specific devices. This is unsustainable and results in poor support for the long tail of older and uncommon devices.With its origin trial over, WebHID is enabled by default in Chrome 89 on desktop. To learn how to use it, check out Human interface devices on the web: a few quick examples.Web NFCNFC stands for Near Field Communications, a short-range wireless technology for transmitting small amounts of data, usually between a specialized NFC device and a reader. If you've scanned a badge to enter a building, you may have used NFC. Web NFC allows a web app to read from and write to NFC tags. This opens new use cases to the web, including providing information about museum exhibits, inventory management, providing information in a conference badge, and many others. In Chrome 89 on Android, Web NFC is enabled by default.

Web NFC cards demo at Chrome Dev SummitWith NFC reading and writing are simple operations. You'll need a little instruction for constructing and interpreting payloads, but it's not complicated. Fortunately, we have an article, some samples you can play with. Here's a taste:Writing a string to an NFC tag:

if ("NDEFReader" in window) {
  const ndef = new NDEFReader();
  await ndef.write("Hello world!");
}

Scanning messages from NFC tags:

if ("NDEFReader" in window) {
  const ndef = new NDEFReader();
  await ndef.scan();
  ndef.onreading = ({ message }) => {
    console.log(`Records read from a NFC tag: ${message.records.length}`);
  };
}

Web Serial APIA serial port is a bidirectional communication interface that allows sending and receiving data byte by byte. The Web Serial API brings this capability to websites, letting them control devices such as microcontrollers and 3D printers.In educational, hobbyist, and industrial settings, peripheral devices are already controlled through web pages. In all such cases device control requires installation of adapters and drivers. The Web Serial API improves the user experience by enabling direct communication between a website and a peripheral. Its origin trial is over and the Web Serial API is now enabled on desktop. A Read to and write from a serial port. Web Sharing on DesktopTo allow users to easily share content on social networks, developers have manually integrated sharing buttons into their site for each social service. This often leads to users not being able to share with the services they actually use, in addition to bloated page sizes and security risks from third-party code. On the receiving end, only platform apps could register to be share targets and receive shares from other apps. Chrome for Android started adding these features between Chrome 61 and 75. In Chrome 89, web sharing is available on Windows and ChromeOS, while registering as a share target is supported on ChromeOS. On these platforms, sites can now use navigator.share() on desktop to trigger a share dialog box. And an entry to the web app manifest allows a PWA to act as a share target. For information on web sharing, see Receiving shared data with the Web Share Target API.Origin TrialsThere are no new origin trials in this version of Chrome. To register for current origin trials, visit the Origin Trials Guide for Web Developers.Other features in this releaseAVIF Image DecodeChrome now supports decoding AVIF content natively using existing AV1 decoders on Android and WebView. (Desktop support was added in Chrome 85.) AVIF is a next generation image format standardized by the Alliance for Open Media. There are three primary motivations for supporting AVIF:

Reducing bandwidth consumption to load pages faster and reduce overall data consumption. AVIF offers significant file size reduction for images compared with JPEG or WebP.

Adding HDR color support. AVIF is a path to HDR image support for the web. JPEG is limited in practice to 8-bit color depth. With displays increasingly capable of higher brightness, color bit depth, and color gamuts, web stakeholders are increasingly interested in preserving image data that is lost with JPEG.

Supporting ecosystem interest. Companies with a large web presence have expressed an interest in shipping AVIF images on the web.

Cross-origin opener policy reporting APIreporting API with Chrome DevTools.Display override in web app manifestsThe new display_override field for the web app manifest allows developers to specify an explicit fallback chain for the display field. The following example specifies a "minimal-ui", falling back to "standalone".

{
  "display": "standalone",
  "display_override": ["minimal-ui"],
}

This API is intended for advanced use cases and display modes, and its capabilities are limited. You can learn more in its Chrome Status entry.Expose ReadableStreamDefaultController interfaceChrome now exposes the ReadableStreamDefaultController interface on the global object, as with the other ReadableStream-related classes. This eliminates a previous limitation where instances had to be created inside stream constructors.performance.measureUserAgentSpecificMemory() The feature adds a cross-origin isolated to use it.Potentially trustworthy data: urls To conform to current web standards, Chrome now treats all data: urls as potentially trustworthy.
For background, It's often necessary to evaluate whether a URL is secure in order to only enable certain features when minimum standards of authentication and confidentiality are met. For that purpose, web standards rely on the definition of "potentially trustworthy URL", which includes URLs with the "data" scheme in the latest version of the Secure Contexts specification. Blink previously only treated some data: URLs as potential trustworthy. Streams API: Byte StreamsThe streams APIs provide ubiquitous, interoperable primitives for creating, composing, and consuming streams of data. For streams representing bytes, Chrome now supports an extended version of the readable stream to handle bytes efficiently, specifically by minimizing copies.
Byte streams allow for Bring Your Own Buffer (BYOB) readers to be acquired. The default implementation can give a range of different outputs such as strings or array buffers in the case of web sockets, whereas byte streams guarantee byte output. Furthermore, being able to have BYOB readers has stability benefits. This is because if a buffer detaches, there's now a guarantee that the same buffer won't be written to twice, hence avoiding race conditions. BYOB readers also do not need to garbage collect for every read, because buffers are reused.Support for full 'filter' property syntax on SVG elementsChrome now allows the full syntax of the 'filter' property to be used on SVG elements which previously only supported single url() references. This lets filter functions such as blur(), sepia() and grayscale() apply to both SVG elements and non-SVG elements. It makes the platform support for 'filter' more uniform and allows for easier application of some "canned" effects. Without this feature developers need to use a full SVG <filter> element definition even for basic filters such as grayscale() or blur().WebAuthentication API: ResidentKeyRequirement and credProps extensionChrome now supports two new features related to the Web Authentication API. The AuthenticatorSelectionCriteria.residentKey property specifies for web authentication credential registration whether a client-side discoverable credential should be created. The Web Authentication credProps extension indicates to the relying party whether a created credential is client-side discoverable. "Client-side discoverable credentials" are a type of WebAuthn credential that can be challenged by a relying party without needing to provide the credential ID in the WebAuthn API request. Browsers display a list of all discoverable credentials from a given authenticator (either external security key or built-in) and let the user choose one to sign in with.CSS::target-text pseudo-elementAdds scroll-to-text fragments differently from the default user agent highlighting.flow-relative Corner Rounding propertiesCSS Logical Properties and Values spec. The following logical properties have been added:

border-start-start-radius

border-start-end-radius

border-end-start-radius

border-end-end-radius

Forced colors propertyThe forced-colors media feature detects whether the user agent is enforcing a user-chosen limited color palette on the page.Forced colors adjust propertyThe forced-color-adjust property allows authors to opt particular elements out of forced colors mode, restoring full control over the colors to CSS.JavaScriptThis version of Chrome incorporates version 8.9 of the V8 JavaScript engine. It specifically includes the changes listed below. You can find a complete list of recent features in the V8 release notes.Top-level awaitChrome now allows the await keyword at the top level within JavaScript modules. This allows more seamless integration of asynchronous calls into the module loading process. Today this is accomplished by wrapping modules in async functions, but this pushes complexity into dependent modules and exposes implementation details.Developer NotesImage Orientation with EXIFEXIF information is now always used to a CSS working group draft.Deprecations and RemovalsThis version of Chrome introduces the deprecations and removals listed below. Visit ChromeStatus.com for lists of previous removals.Remove prefixed events for <link rel=prerender>The legacy prefixed events (webkitprerenderstart, webkitprerenderstop, webkitprerenderload, and webkitprerenderdomcontentloaded) dispatched on <link rel=prerender> are now removed from Chrome.Stop cloning sessionStorage for windows opened with noopenerWhen a window is opened with noopener, Chrome will no longer clone the sessionStorage of its opener; it will instead start an empty sessionStorage namespace. This brings Chrome in conformance with the HTML specification.