Chromium Blog
News and developments from the open source browser project
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.
Dynamic module imports
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 */
});
});
The
code example
above shows how to use the import(specifier) function to import JavaScript after an event
.
Async iterators and generators
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;
}
}
The code example above shows how to use async iterators to writer cleaner code for streaming fetches, using the
streamAsyncIterator function
.
Device Memory API
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.
Other features in this release
Blink > Bindings
To improve interoperability, a
TypeError
is now thrown for
EventTarget.addEventListener and removeEventListener
when the callback passed is not an
EventListener
,
null
, or
undefined
.
Blink > CSS
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.
Blink > Fonts
font-variant-east-asian
is now supported, allowing developers to control the
usage of alternate glyphs
for East Asian languages like Japanese and Chinese.
Blink > HTML
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.
Blink > JavaScript
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.
Blink > MediaStream
MediaStreamTrack.applyConstraints()
is now supported for local video
MediaStreamTracks
, including tracks obtained from
getUserMedia()
,
capture from media elements
or screen capture.
Blink > Network
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.
Blink > Sensor
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: A
ccelerometer, LinearAccelerationSensor, Gyroscope, AbsoluteOrientationSensor
, and
RelativeOrientationSensor
.
Blink > Storage
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!
UI > Browser > Mobile (Android)
display: minimal-ui
is now supported by Chrome on Android, enabling developers to
display a UI similar to Chrome Custom Tabs
for users.
Deprecations and interoperability improvements
Blink > Bindings
To improve interoperability,
instance properties
with a Promise type now return a rejected promise instead of throwing an exception.
Blink > CSS
The
/deep/
or
>>>
, selector, as well as
::shadow,
are
now
removed
from CSS dynamic profile, following their
deprecation
in Chrome 45.
Blink > DOM
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.
Posted by
Sathya Gunasekaran, Lazily-Loaded Engineer
Introducing the Chrome User Experience Report
Monday, October 23, 2017
Chrome was founded to push the web forward, and a key part of that is enabling developers to improve their user experience. Although current tools allow developers to understand how real-world users experience their own sites, they have never provided insight into comparisons with other sites or macro user experience trends across the web. Following similar efforts like the
HTTPS Transparency Report
, today we’re making the
Chrome User Experience Report
available to encourage performance and user experience improvements across the web.
The report is a public dataset of key user experience metrics for top origins on the web. All performance data included in the report is from real-world conditions, aggregated from Chrome users who have opted-in to syncing their browsing history and have
usage statistic reporting enabled
. The initial release includes data from a sample of ten thousand origins and focuses on loading metrics, though we hope to expand coverage in future iterations. For full details on the dataset format, how to access it, and best practices for analysis, please see
our developer documentation
.
By querying the dataset, developers can understand how real Chrome users experience the web from the diverse set of hardware, software, and networks they use in the wild. Analyzing many origins on the web will help site developers and the web community understand where they are doing well, identify areas for improvement, and observe advancements in user experience over time.
We welcome
feedback
on the dataset’s format, metrics, dimensions, or any other ways to improve the report. We hope that this dataset will help the web community identify opportunities, record trends, and improve user experience on the web.
Posted by Bryan McQuade and Ilya Grigorik, User Experience Reporters
Building unified documentation for the web
Wednesday, October 18, 2017
Browsers are always exploring new directions. This independent experimentation has enabled the web to evolve to meet new use cases, but it also means that keeping up with how the web is changing can be difficult. Browsers maintain documentation for their features and APIs, but cross-browser documentation is often fragmented across several sources. One of Chrome’s top priorities is making it easier to build sites that work in all browsers, and simplifying web documentation is a key part of that effort.
Today, web documentation is taking a big step towards a unified source.
Mozilla Developer Network (MDN) Web Docs
is announcing a new product advisory board, which includes founding members from
Mozilla
, Google,
Microsoft
, Samsung, and several others from the web standards and development communities. The product advisory board will review and provide feedback on the direction of MDN’s web documentation going forward.
For the last several years, Chrome has been transitioning its web documentation efforts to MDN, allowing us to combine our documentation efforts with many open source contributors like Mozilla. The product advisory board is another step towards making MDN the best source of up-to-date, comprehensive documentation on the web and aligns closely with our goal to make it easier to build for the web as a whole. As part of this effort, we’re also
investing in interoperability tests for the web
, which allows browsers to share tests and compare the compatibility of their features. We’re also building new infrastructure to help browser developers find bugs and missing APIs between implementations.
Check out MDN Web Docs as the centralized source of web API documentation. And look out for more information on how we’re working to make the web an even easier platform to build on.
Posted by Dru Knox, Product Manager
Chrome 62 Beta: Network Quality Estimator API, OpenType variable fonts, and media capture from DOM elements
Wednesday, September 20, 2017
Unless otherwise noted, changes described below apply to the newest Chrome
Beta
channel release for Android, Chrome OS, Linux, Mac, and Windows.
Network Quality Estimator API
The
Network Infomation API
has been available in previous versions of Chrome, but has only provided theoretical network speeds given the type of a user's connection. In this release, the API has been expanded to provide developers with
network performance metrics
as experienced by the client. Using the API, a developer can inspect the current expected
round trip time and throughput
and be notified of performance changes. To simplify application logic, the API also summarizes measured network performance as the cellular connection type (e.g.
2G
) most similar to it, even if the actual connection is WiFi or Ethernet.
Using these network quality signals, developers can tailor content to network constraints. For example, on very slow connections, developers can serve a simplified version of the page to improve
page load times
. These signals will also soon be available as HTTP request headers and enabled via
Client Hints
.
OpenType Variable Fonts
OpenType Font Variations
bring new typographic capabilities to the web. Previously, one font file contained just a single instance of a font family, including only one weight (Regular, Bold, Black…) or one stretch (Normal, Condensed, Expanded…).
Figure: Animated
Amstelvar
and
Decovar
variable font examples
With variable fonts, responsive design on the web now extends to typography. OpenType Variations provide a continuous spectrum of stylistic variations while saving space and bandwidth, since they all load from a single compact font file. Stretch, style, and weight can be adjusted using the respective
updated CSS properties
which now allow numeric values. Fine tuning of variation axis parameters, such as weight or width, is possible using the
font-variation-settings
CSS property.
Media Capture from DOM Elements
The
W3C Media Capture from DOM Elements
API now allows sites to
live-capture
content in the form of a MediaStream directly from
HTMLMediaElements
(i.e.
<video>
and
<audio>
). By invoking the
captureStream()
method on
HTMLMediaElements
,
streamed
content can be recorded and sent remotely using WebRTC, processed with WebAudio, or manipulated in various
other ways
.
Sorry! Your browser does not support the video element. View animation
here
.
Figure: A 3D rendering being live-captured and streamed to a peer connection using WebRTC.
Other features in this release
The
Payment Request API
is now available on Chrome for iOS
.
PaymentRequest
n
o
w
s
u
p
p
o
r
t
s
d
i
f
f
e
r
e
n
t
p
r
i
c
e
s and line items
p
e
r
p
a
y
m
e
n
t
m
e
t
h
o
d
w
i
t
h
PaymentDetailsModifier.data
.
DOM interfaces are now supported for the
<data>
and
<time>
HTML elements to give developers a native, machine-readable way to store client-side content.
The
CSS color parser
now
supports
8- and 4-digit hex colors of the format
#RRGGBBAA
and
#RGBA
.
Lookbehind
assertions are now available in addition to lookaheads, so developers can use regular expressions to ensure that a pattern is or isn’t preceded by another, e.g. matching a dollar amount without capturing the dollar sign.
A new
WebVR Origin Trial
is now available, enabling developers to experiment with building rich Virtual Reality experiences on the web.
Following previous
announcements
, the
“Not secure”
warning will now be displayed when users enter data on an HTTP page, and on all HTTP pages visited in Incognito mode.
The `tabindex` attribute now enables the on-screen keyboard on Chrome for Android to more easily navigate between the next and previous fields within a form, thanks to a
contribution
from Samsung.
Developers can now use the
s
flag
to enable
dotAll
mode
in ECMAScript regular expressions, making “
.
” match any character, including line terminators.
Uploading images on Chrome for Android has an improved user experience and multi-select support that triggers on any site that invokes
<input type="file">
with an
accept
attribute specifying that only images are accepted.
Apps using the
MediaSource API
can now more effectively customize their
HTMLMediaElement.seekable
range logic using the new
Media Source Extensions
APIs,
setLiveSeekableRange
and
clearLiveSeekableRange
.
The new
visibility:collapse
CSS declaration now hides table rows while preserving their contribution to column widths, rather than treating it like
visibility:hidden
, which merely skips painting the rows.
Media Source Extensions (MSE)
now
support
FLAC, a lossless audio coding format, in
ISO-BMFF
.
Protected media can
now
be played offline through
EME
on Chrome for Android.
Chrome for Android now supports
Widevine L1
, allowing sites to play encrypted media in a secure way.
Loosened restrictions
on escape sequences in template literals unlock new use cases for template tags, such as LaTeX processing.
In Android O, sites with notification permissions now appear as a
Notification Channel
in Android Settings under Chrome, affording users a simpler way to manage permissions.
Deprecations and interoperability improvements
Following an update to native button appearance on macOS, the appearance of
<input>
buttons and the
<button>
element have been similarly
changed
, affecting the default values for the
background-color
,
border
,
border-radius
, and
padding
CSS properties
.
The ability to request permission to show notifications has been removed over HTTP connections and within cross-origin
iframes
, in line with our policy on
restricting powerful features
to only HTTPS.
To increase accuracy and ensure that users receive content in the language they expect,
base language is
now added
immediately after language+region when generating
accept-language
headers from language settings.
To improve UX and browser consistency, transitional mouse events will now be
dispatched
, and
hover states
will now be
updated
more quickly after the intended layout has been modified.
OfflineAudioContext
now accepts a dictionary argument, in addition to the
existing
constructor that takes three separate arguments.
In line with other browsers, the
getStreamById
method on
RTCPeerConnection
has now been
removed
.
SharedWorker.workerStart
has been removed, following its deprecation and removal from other major browsers.
To better conform to spec, the default value of
<ol>.start
has been set to
1
.
Posted by Ben Greenstein and Tarun Bansal, The Network’s Watch
Unified autoplay
Thursday, September 14, 2017
Users watch and listen to
a lot of media
, and autoplay can make it faster and easier to consume on the web. However, one of the most frequent user concerns is unexpected media playback, which can use data, consume power, and make unwanted noise while browsing. To address this, Chrome will be making autoplay more consistent with user expectations and will give users more control over audio.
Starting in Chrome 64, autoplay
will be allowed
when either the media won’t play sound, or the user has indicated an
interest in the media
. This will allow autoplay to occur when users want media to play, and respect users' wishes when they don't. These changes will also
unify desktop and mobile web behavior
, making web media development more predictable across platforms and browsers.
Not all users have the same preferences for autoplay media, so Chrome 63 will add a new user
option
to completely disable audio for individual sites. This site muting option will persist between browsing sessions, allowing users to customize when and where audio will play.
These changes will give users greater control over media playing in their browser, while making it easier for publishers to implement autoplay where it benefits the user. For more details, please see the
autoplay roadmap
.
Posted by Mounir Lamouri, Software Engineer
Update 2018-05-21:
The autoplay policy is in effect for <video> and <audio> and prevents roughly half of unwanted media autoplays. Please see the Chrome
blog post
for more details.
For the Web Audio API, the policy described in this post will go into effect in Chrome 70 (October, 2018). This will affect web games and some WebRTC applications, as well as any site using the Web Audio API. We recommend that developers
update their code
to correctly handle the autoplay policy.
Labels
$200K
1
10th birthday
4
abusive ads
1
abusive notifications
2
accessibility
3
ad blockers
1
ad blocking
2
advanced capabilities
1
android
2
anti abuse
1
anti-deception
1
background periodic sync
1
badging
1
benchmarks
1
beta
83
better ads standards
1
billing
1
birthday
4
blink
2
browser
2
browser interoperability
1
bundles
1
capabilities
6
capable web
1
cds
1
cds18
2
cds2018
1
chrome
35
chrome 81
1
chrome 83
2
chrome 84
2
chrome ads
1
chrome apps
5
Chrome dev
1
chrome dev summit
1
chrome dev summit 2018
1
chrome dev summit 2019
1
chrome developer
1
Chrome Developer Center
1
chrome developer summit
1
chrome devtools
1
Chrome extension
1
chrome extensions
3
Chrome Frame
1
Chrome lite
1
Chrome on Android
2
chrome on ios
1
Chrome on Mac
1
Chrome OS
1
chrome privacy
4
chrome releases
1
chrome security
10
chrome web store
32
chromedevtools
1
chromeframe
3
chromeos
4
chromeos.dev
1
chromium
9
cloud print
1
coalition
1
coalition for better ads
1
contact picker
1
content indexing
1
cookies
1
core web vitals
2
csrf
1
css
1
cumulative layout shift
1
custom tabs
1
dart
8
dashboard
1
Data Saver
3
Data saver desktop extension
1
day 2
1
deceptive installation
1
declarative net request api
1
design
2
developer dashboard
1
Developer Program Policy
2
developer website
1
devtools
13
digital event
1
discoverability
1
DNS-over-HTTPS
4
DoH
4
emoji
1
emscriptem
1
enterprise
1
extensions
27
Fast badging
1
faster web
1
features
1
feedback
2
field data
1
first input delay
1
Follow
1
fonts
1
form controls
1
frameworks
1
fugu
2
fund
1
funding
1
gdd
1
google earth
1
google event
1
google io 2019
1
google web developer
1
googlechrome
12
harmful ads
1
html5
11
HTTP/3
1
HTTPS
4
iframes
1
images
1
incognito
1
insecure forms
1
intent to explain
1
ios
1
ios Chrome
1
issue tracker
3
jank
1
javascript
5
lab data
1
labelling
1
largest contentful paint
1
launch
1
lazy-loading
1
lighthouse
2
linux
2
Lite Mode
2
Lite pages
1
loading interventions
1
loading optimizations
1
lock icon
1
long-tail
1
mac
1
manifest v3
2
metrics
2
microsoft edge
1
mixed forms
1
mobile
2
na
1
native client
8
native file system
1
New Features
5
notifications
1
octane
1
open web
4
origin trials
2
pagespeed insights
1
pagespeedinsights
1
passwords
1
payment handler
1
payment request
1
payments
2
performance
20
performance tools
1
permission UI
1
permissions
1
play store
1
portals
3
prefetching
1
privacy
2
privacy sandbox
4
private prefetch proxy
1
profile guided optimization
1
progressive web apps
2
Project Strobe
1
protection
1
pwa
1
QUIC
1
quieter permissions
1
releases
3
removals
1
rlz
1
root program
1
safe browsing
2
Secure DNS
2
security
36
site isolation
1
slow loading
1
sms receiver
1
spam policy
1
spdy
2
spectre
1
speed
4
ssl
2
store listing
1
strobe
2
subscription pages
1
suspicious site reporter extension
1
TCP
1
the fast and the curious
23
TLS
1
tools
1
tracing
1
transparency
1
trusted web activities
1
twa
2
user agent string
1
user data policy
1
v8
6
video
2
wasm
1
web
1
web apps
1
web assembly
2
web developers
1
web intents
1
web packaging
1
web payments
1
web platform
1
web request api
1
web vitals
1
web.dev
1
web.dev live
1
webapi
1
webassembly
1
webaudio
3
webgl
7
webkit
5
WebM
1
webmaster
1
webp
5
webrtc
6
websockets
5
webtiming
1
writable-files
1
yerba beuna center for the arts
1
Archive
2024
Jun
May
Apr
Mar
Feb
2023
Nov
Oct
Sep
Aug
Jun
May
Apr
Feb
2022
Dec
Sep
Aug
Jun
May
Apr
Mar
Feb
Jan
2021
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2020
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2019
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2018
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2017
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2016
Dec
Nov
Oct
Sep
Aug
Jun
May
Apr
Mar
Feb
Jan
2015
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2014
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2013
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2012
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2011
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2010
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2009
Dec
Nov
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2008
Dec
Nov
Oct
Sep
Feed
Follow @ChromiumDev
Give us feedback in our
Product Forums
.