What’s New in Chrome 81 for Developers?

The latest chrome update – Chrome 81 brings in developers to simplify various processes. It includes AR features for web apps, app icon badging to improve the UXUXUser Experience Design (UXD, UED, or XD) is the process of manipulating user behavior through usability, accessibility, and desirability provided in the interaction with a product. User experience design encompasses traditional human–computer interaction (HCI) design and extends it by addressing all aspects of a product or service as perceived by users. Experience design (XD) is the practice of designing products, processes, services, events, omnichannel journeys, and environments with a focus placed on the quality of the user experience and culturally relevant solutions. when it comes to notifications, NFCNFCNear-field communication is a set of communication protocols for communication between two electronic devices over a distance of 4 cm or less. NFC offers a low-speed connection with simple setup that can be used to bootstrap more-capable wireless connections., and other new features. Let’s get a glimpse of these features below.

WebXR Hit Testing

Popular furniture brands have come up with native apps that let you visualize your living space with a couch or sofa of your choice even before buying them. You can do that on the web as well with the help of Web XRWeb XRWebXR is a group of standards which are used together to support rendering 3D scenes to hardware designed for presenting virtual worlds (virtual reality, or VR), or for adding graphical imagery to the real world, (augmented reality, or AR). Device APIAPIAn application program interface (API) is a set of routines, protocols, and tools for building software applications. Basically, an API specifies how software components should interact. Additionally, APIs are used when programming graphical user interface (GUI) components..

Also, you can place any virtual object on any surface such as walls, vases, etc. through your camera’s view of the real world with the help of Web XR Hit Test API.

App Icon Badging

In this latest Chrome update, the app icon badging feature moves to the stable version from the origin trial. Hence, you can now use badges on any site without a token.

App icon badges are great forms of UI elements that help you to notify/indicate a little information to your users without interrupting their user experience. It can help indicate an unread count of messages.

As said earlier, app icon badges are more user-friendly than notifications. The best part about app icon badges is that it can be updated frequently as it doesn’t interrupt the user. Thus, few of the use cases include badging numbers of unread messages in emails, numbers of notifications in social media apps, and even games that help users know that it’s time for something.

New Origin Trials

Web NFC

Web NFC is now in origin trial in Chrome 81. It is focussed to enable web apps to read and write to NFC tags. Thus, it opens up a wide array of opportunities to provide more details about museum exhibits, inventory management, reading information from a conference badge, and more.

It is quite easy to use Web NFC. All you have to do to get the scan started is to create a new instance of an NDEFReader object.

const reader = new NDEFReader();
async function startScan() {
  await reader.scan();
  reader.onreading = (e) => {
    console.log(e.message);
  };
}

So, whenever an NFC tag is scanned, the reader will start a reading event, and it can be used to loop the incoming messages.

Other Developer Features in this Release Include:

In the new Chrome 81, trackingpositionstate is now supported by media session APIs and as a result, you can see where you are in a track and easily skip back or forwards.

The new V8 JavaScript engine (version 8.1) introduces Intl.DisplayNames API to help developers showcase translated names of currencies, regions, scripts, and languages. By doing so, it is expected to improve latency and reduce the app size. As a result, the apps can have internationalized UI components, mitigate expenses made on translation, and offer accurate and consistent translation across the web.

During PointerLock, scripts can now request unadjusted and unaccelerated mouse movement data. When you set unadjustedMovement to true, underlying platform modifications such as mouse acceleration can’t affect the pointer movements.

Buffered Flag for Long Tasks: Now, the PerformanceObserver supports long tasks and it offers insights into long tasks for pages and apps that register a PerformanceObserver</code early.

CSS image-orientation property: By default, Chrome adheres to the EXIF metadata within images that suggests the optimum orientation. Hence, developers can override this behavior by including image-orientation property.

CSS Color Adjust: A new CSSCSSCascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. property and Meta tag enable websites to opt-in to follow the preferred color schemes when rendering UI elements. With this feature, you can get UI elements with default colors of form controls and scrollbars and the used values of the CSS system colors. 

Exclusion of Implicit Tracks: Now, implicit tracks are excluded from the resolved values of the grid-template-columns and grid-template-rows. In earlier versions, regardless of implicit or explicit, all tracks were included.

hrefTranslate Attribute: The HTMLAnchorElement now comes with an hrefTranslate attribute. It enables the page to send signals to a user agent’s translation engine that the destination website of an href has to be translated if followed. 

IntersectionObserver Document Root: The IntersectionObserver() constructor now considers Document as the root argument. As a result, the intersections are calculated against the scrolling viewport of the document. It is included in this version by keeping the observers running in an iframe in mind. The previous version had no possibilities to measure intersection with the scrolling viewport on the iframe’s document. 

GlobalEventHandlers: The onwebkit{animation,transition}xx handlers are now available on Document & HTMLElement as required by the spec. Earlier, they were available only on the Window object. As a result, it brings Chrome in line with WebKitWebKitWebKit is a browser engine developed by Apple and primarily used in its Safari web browser, as well as all the iOS web browsers. WebKit is also used by the BlackBerry Browser, the Tizen mobile operating systems, and a browser included with the Amazon Kindle e-book reader. and GeckoGeckoGecko is designed to support open Internet standards, and is used by different applications to display web pages and, in some cases, an application's user interface itself..

Position State for Media: Chrome 81 added support to track position state in a video. Here, the position state is a combination of duration, current playback time and playback rate. Using all this information, the Chrome 81 is able to display the current video position in the UI and along with the help of seeking, it can support seeking/scrubbing too.

SubmitEvent: The latest Chrome update supports a SubmitEvent type, which is an Event subtype that is dispatched on form submission. The SubmitEvent comes with a submitter property that targets various attributes of the submitter button. The attributes include formaction, formenctype, formmethod, and formtarget.

WebAudio: In the previous Chrome version, for ConvolverNode, a channelCount of 1 and channelCountMode of “explicit” were not allowed. Now, you can set the channelCount to 1 or 2 and the channelCountMode can be “explicit” or “clamped-max”. Furthermore, the latest Chrome update now allows developers to do the desired mixing without the help of a GainNode.

RTCPeerConnection.onicecandidateerror event changes: The candidateerror event now comes with a dedicated address and port, replacing hostCandidate.

onclosing Event: It added the onclosing event to the RTCDataChannel object. It means that it can send messages over signals to the user of a data channel stating the other side is closing its channel. However, the user agent continues reading from the queue until the queue is empty and no further data can be sent.

WorkerOptions: Previously, the second argument was a string containing the worker’s name and is now replaced by the WorkerOptions object as the second argument for a shared worker constructor. However, Chrome still supports the previous second argument. 

WritableStream.close(): WritableStream objects now come with a close() method to close an unlocked stream. It is similar to getting a writer, using it to close the stream, and then unlocking it again.

Also, the support for TLS 1.0 and TLS 1.1 was supposed to be removed in the earlier versions, but luckily, they have been postponed to at least Chrome 83.

We, at TechAffinity, have expert front-end developers that are capable of developing websites that are cross-browser compatible and responsive. Line up your queries to media@techaffinity.com or schedule a meeting with our experts.