The stable version of Chrome 78 will be released on October 22, 2019. Few users will notice changes but there are some exciting new features for web developers…
The opacity property currently accepts a value between 0 (fully transparent) and 1 (fully opaque). Chrome 78 also permits a percentage from 0% to 100%:
/* identical styles */ .style1 { opactity: 0.75; } .style2 { opacity: 75%; }
This brings some much-needed consistency to CSS since the rgba() function already accepts a percentage, e.g. rgba(100, 150, 200, 75%)
.
Percentages can also be used on opacities set in the SVG properties stop-opacity, fill-opacity, stroke-opacity, and shape-image-threshold.
Optional chaining is an ES2019 proposal that will save you hours of typing and debugging effort! Imagine you need to analyze a user object which has been returned following an Ajax request to a REST API call:
let user = { firstname: 'Imaginary', lastname: 'Person', address: { street1: '123 Madeup Street', street2: '', city: 'Nowhereville', country: 'Antarctica' } }; // output "Antarctica" console.log( user.address.country );
What if the country value had not been set? JavaScript would return undefined.
Unfortunately, the situation is worse if the address or user object has not been defined – the code will raise an error and stop further JavaScript code from running.
For this reason, your code must check the existence of every parent property:
let country = (user && user.address && user.address.country) || undefined;
Or the more hideous:
let country = (user ? (user.address ? (user.address.country ? user.address.country : undefined ) : undefined ) : undefined );
Optional chaining in Chrome 78 permits the considerably more concise ?.
chaining operator:
let country = user?.address?.country;
Instead of throwing an error, JavaScript sets the country variable to undefined if any value is falsy (null, undefined, etc.) Further methods can be appended without risk of failure:
let countryLength = user?.address?.country?.length;
While optional chaining is incredibly useful, no other browser or Node.js currently permits the syntax. A Babel plugin will be necessary until support becomes more widespread.
The Intl object provides locale-specific string comparison, number formatting, date and time formatting which is especially useful when operating in global markets. The API has reasonable support across browsers and is slowly appearing in Node.js. Check out this example:
// set date to 31 December 2020 let date = new Date(2020, 11, 31); // outputs US date format - 12/31/2020 console.log( new Intl.DateTimeFormat('en-US').format(date) ); // outputs UK date format - 31/12/2020 console.log( new Intl.DateTimeFormat('en-GB').format(date) ); // set number let num = 12345.67; // output US number format - 12,345.67 console.log( new Intl.NumberFormat('en-US').format(number) ); // output German number format - 12.345,67 console.log( new Intl.NumberFormat('de-DE').format(number) );
DateTimeFormat and NumberFormat accept an optional options object as a second parameter. Chrome 78 adds calendar
and numberingSystem
options for locales that use two or more calendars or numbering systems.
The window unload event triggers when a user navigates away from the page:
window.addEventListener('unload', () => { // do something when the user leaves the page });
Similar events can be registered for:
Typically, these events can be used to check data that has been saved or record usage analytics.
Unfortunately, some less-conscientious developers can add code to harm the user experience. From version 78, Chrome will not permit:
AllowSyncXHRInPageDismissal
policy flag, but the flag will also be removed in version 82window.open()
– the popup blocker will normally prevent this, but it is now prohibited even when the blocker is inactivePrior to Chrome 78, the window.scrollTo() method and scroll properties such as scrollTop and scrollLeft would calculate the nearest physical pixel. For example, on a double pixel density device (devicePixelRatio is 2), window.scrollTo
(0, 123.678) and window.scrollTop
would equate to 123.5.
From Chrome 78, the actual value passed will be returned (123.678) regardless of the physical pixels. This should help prevent scroll calculation issues especially when a page is zoomed.
The User Timing API allows developers to measure application performance by creating custom timestamps. Named performance marks are created at critical points throughout your code, e.g.
performance.mark('markstart'); // ...processing... performance.mark('markend');
Performance measures can then report the duration between two marks, e.g.
performance.measure('m1', 'markstart', 'markend'); performance.getEntriesByName('m1'); /* Returns something like: (1) [...] 0: PerformanceMeasure duration: 5153 entryType: "measure" name: "m1" startTime: 7314 */
Level 3 permits developers to pass custom timestamps and arbitrary metadata to performance mark and measure methods.
The Payment Request API aims to provide a consistent and secure online transaction experience for merchants and customers. It allows users to select their preferred payment option which is passed to the e-commerce website.
Chrome 78 introduces several new options:
The WebSocket API creates a two-way communication channel between the browser and the server. Either device can send a message at any point, so the technology is often used for chat rooms, multiplayer games, and real-time data updates.
Unfortunately, messages can arrive faster than the browser can cope with. In those situations, the memory buffer can overflow or CPU usage will increase to the point that the browser becomes unresponsive.
WebSocketStream supersedes the WebSocket API. It is promise-based and integrates streams so a chunk of data can be parsed before the full message has been received.
The API is new, experimental, and may evolve or be dropped before becoming a W3C standard. For more information, refer to WebSocketStream Explained.
HTML audio and video media elements register a number of events such as:
Chrome 78 introduces a new seekto action handler which is called when playback is moved to a specific point on the timeline. This could be used to make DOM changes, record analytics, etc. At the time of writing, there is no documentation or support in other browsers.
The Screen Enumeration API provides information about all displays connected to the user’s device. It will typically be useful in situations where an application can use more than one monitor, e.g. presentations that provide public-facing slides and speaker note displays.
No documentation is currently available, but it will be used in conjunction with the new Window Placement API.
The Native File System API allows the browser to directly interact with the chosen files on the user’s local device. It could be used to edit photos, videos, or text documents from client-side JavaScript without requiring upload and download processes.
Chrome 78 provides an early version of the API for trial purposes and developers must register for a token from Google before it can be used.
SMS text messages are often used to verify phone numbers or send one-time-passwords (OTP) codes. Native smartphone apps can intercept, read, and react to these messages but web app users are forced to manually copy/paste or retype information.
The new SMS Receiver API allows web apps to read SMS messages addressed to them using specific formatting conventions in order to avoid manual user interaction, e.g.
Your OTP is: 123ABC For: https://example.com/verify?otp=123ABC&hash=9B3FF1C2
Retrieval JavaScript:
if (navigator.sms) { try { let { content } = await navigator.sms.receive(); console.log('SMS text:', content); } catch (e) { console.log('error', e); } }
If you’re hungry for more, a number of minor and experimental features are also available:
WebAssembly.Table
objectsIt’s encouraging to see continued innovation on the Chrome browser despite its monopolistic market share.
While it’s tempting to jump in head first, many of the new features are experimental and could change radically, disappear, or never be implemented in other browsers. Experimentation is healthy, but be wary about gambling your reputation on Google’s whims!
Install LogRocket via npm or script tag. LogRocket.init()
must be called client-side, not
server-side
$ npm i --save logrocket // Code: import LogRocket from 'logrocket'; LogRocket.init('app/id');
// Add to your HTML: <script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script> <script>window.LogRocket && window.LogRocket.init('app/id');</script>
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowBuild scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]
One Reply to "What’s new in Chrome 78"
SMS Receiver API is still in origin trial, optional chaining is still behind an experimental flag.