Chrome 63 Beta: Dynamic module imports, async iterators and generators, Device Memory API, and permissions UI changes
Friday, October 27, 2017
Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.
Currently, importing JavaScript modules is completely static, and developers cannot import modules based on runtime conditions, like whether a user is logged in. Starting in this release, the import(specifier) syntax now allows developers to dynamically load code into modules and scripts at runtime. This can be used for lazy loading a script only when it’s needed, which improves performance of the application.
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
});
});
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
});
});
The code example above shows how to use the import(specifier) function to import JavaScript after an event.
Writing code that does any sort of iteration with async functions can be inelegant. The new async generator functions using the async iteration protocol are now available to help developers streamline the consumption or implementation of streaming data sources. Async iterators can be used in for loops and also to create custom async iterators through async iterator factories.
async function* getChunkSizes(url) {
const response = await fetch(url);
for await (const chunk of streamAsyncIterator(response.body)) {
yield chunk.length;
}
}
const response = await fetch(url);
for await (const chunk of streamAsyncIterator(response.body)) {
yield chunk.length;
}
}
The code example above shows how to use async iterators to writer cleaner code for streaming fetches, using the streamAsyncIterator function.
It’s challenging for developers to create one user experience that can work across all devices, due to varying device capabilities. The new Device Memory JavaScript API helps developers with this challenge by using the total RAM on a user’s machine to provide insights into device constraints. This insight enables developers to tailor content at runtime in accordance with hardware limitations. For example, developers can serve a “lite” app to users on low-end devices, resulting in better experiences and fewer frustrations. The Device Memory API can also be used to add context to metrics, such as the amount of time a task takes to complete in JavaScript, through the lens of device memory.
Permissions UI changes
When websites need special permissions from a user, they trigger a permission request. Currently these permission requests appear in Chrome for Android as ignorable banners at the bottom of the screen, and developers often show them without considering whether the user has the appropriate context to grant the permission. This results in a distracting user experience, and users ignore or temporarily dismiss these permission prompts more than 90% of the time.
In Chrome 59, we started to address this problem by temporarily blocking a permission if the user dismisses the request three times. As a next step, in this release Chrome for Android now presents permission requests as modal dialogs. This change reduces the overall number of permission prompts by 50%. It also makes users 5 times more likely to accept or deny requests, rather than temporarily dismissing or repeatedly ignoring them. To ensure users understand the permission request, developers should present users with permission requests at an appropriate time, as we’ve found that users were 2.5 times more likely to grant permission to a site that ask for permissions with context.
- To improve interoperability, a TypeError is now thrown for EventTarget.addEventListener and removeEventListener when the callback passed is not an EventListener, null, or undefined.
- Developers can now make pixel-level adjustments using the new Q length unit, which is especially useful on small viewports.
- Developers can now prevent apps from using Chrome’s pull-to-refresh feature or create custom effects using overscroll-behavior, which allows changing the browser’s behavior once the scroller has reached its full extent.
- font-variant-east-asian is now supported, allowing developers to control the usage of alternate glyphs for East Asian languages like Japanese and Chinese.
- To improve interoperability, Chrome will fire beforeprint and afterprint events as part of the printing standard, allowing developers to to annotate the printed copy and edit the annotation after the printing command is done executing.
- Using Promise.prototype.finally, a callback can now be registered to be invoked after a Promise has been fulfilled or rejected.
- The Intl.PluralRules API allows developers to build applications that understand pluralization of a given language by indicating which plural form applies for a given number and language.
- MediaStreamTrack.applyConstraints() is now supported for local video MediaStreamTracks, including tracks obtained from getUserMedia(), capture from media elements or screen capture.
- Version 2 of NT LAN Manager (NTLM) API is now shipped, enabling applications to authenticate remote users and provide session security when requested by the application.
- Thanks to contributors from engineers at Intel, an Origin Trial is now available that exposes the following sensors via the new Generic Sensors API syntax: Accelerometer, LinearAccelerationSensor, Gyroscope, AbsoluteOrientationSensor, and RelativeOrientationSensor.
- The localStorage and sessionStorage API's now use getItem() rather than an anonymous getter, so attempting to access a key using getItem() will now return null rather than undefined. Thanks to Intel for the contribution!
- To improve developer experience, the methods on sessionStorage and localStorage such as getItem(), removeItem(), and clear() are now enumerable. Thanks to Intel for making this happen!
- display: minimal-ui is now supported by Chrome on Android, enabling developers to display a UI similar to Chrome Custom Tabs for users.
- To improve interoperability, instance properties with a Promise type now return a rejected promise instead of throwing an exception.
- The /deep/ or >>>, selector, as well as ::shadow, are now removed from CSS dynamic profile, following their deprecation in Chrome 45.
- To improve interoperability, HTMLAllCollection, HTMLCollection, HTMLFormControlsCollection and HTMLOptionsCollection are no longer enumerable, so they are now left out of calls to Object.keys() or for-in loops.