Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 68 on
ChromeStatus.com. Chrome 68 is beta as of June 7, 2018.
New add to home screen behavior for progressive web apps
We've heard from developers that they want more control over how and when the add to home screen prompt appears. Starting in Chrome 68 on Android, the behavior is changing to provide more control over when the prompt appears. Developers can now provide additional context for their add to home screen experience, and improve the click-through rate.
 |
| Add to home screen dialog |
If a site meets the
add to home screen criteria, Chrome will fire a
beforeinstallprompt event, and no longer automatically show the add to home screen banner. Instead, when the event has fired, developers can save the event and add a button or other UI element to the app to indicate it can be installed. When the user clicks the install button, developers can call
prompt() on the saved
beforeinstallprompt event to show the new add to home screen modal dialog. Although the
beforeinstallprompt event may be fired without a user gesture, calling
prompt() requires one.
let installPromptEvent;
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update UI notify the user they can add to home screen
document.querySelector('#install-button').disabled = false;
});
As a temporary measure to provide developers with time to handle the
beforeinstallpromptevent and add an install button to their app, Chrome will show a
mini-infobar the first time the user visits a site that meets the
add to home screen criteria. Once dismissed, the mini-infobar will not be shown again until a sufficient amount of time (currently 3 months) has passed.
 |
| Add to home screen mini infobar |
See
Changes to add home screen behavior for complete details, code samples and screenshots of the new UI elements.
Payment Handler API
The Payment Request API brought the web a simpler, faster way to check out online by combining a seamless native-browser UI with a user's preferred form of payment and shipping addresses.
The just-launched
Payment Handler API extends the reach of Payment Request by enabling
web-based payment apps to facilitate payments directly within the Payment Request experience.
const request = new PaymentRequest([{
// Your custom payment method identifier comes here
supportedMethods: 'https://bobpay.xyz/pay'
}], {
total: {
label: 'total',
amount: { value: '10', currency: 'USD' }
}
});
 |
| Making a payment through the Payment Request API. "Pay with BobPay" is a custom payment method built with the Payment Handler API. |
Protecting users from unwanted destinations
In this version of Chrome we are changing a few user interface behaviors to improve users' experience.
Require user gesture for redirects in cross-origin iframes
Unless forbidden by the
sandbox attribute, content embedded in an
iframe can generally navigate the top-level browsing context to a different website. This functionality is used by many types of websites, including single-sign-on providers and payment processors. Unfortunately, this behavior is also a common abuse vector, redirecting users to unwanted destinations without their knowledge or consent.
Beginning in Chrome 68, content embedded in an iframe
will require a user gesture to navigate the top-level browsing context to a different origin. Similar to pop-up blocking, when this protection triggers users will see Chrome UI giving them the option to allow the redirect the continue.
A demonstration illustrates the behavior. The
demo behind this link will exhibit the old behavior in Chrome 67 and early. The improved behavior works in Chrome 68.
Block tab-under navigations
A tab-under is when a page both opens a popup to some destination
and navigates the opener page to some third-party content. Typically this behavior is used to send the user to a desired destination while also creating another tab with an unwanted destination. Similar to pop-ups,
Chrome will prevent these unwanted navigations and instead show native UI to the user so they can choose whether to follow this redirect to the new direction.
The Page Lifecycle API
Application lifecycle is a key way that modern operating systems manage resources. On Android, iOS and recently Windows, apps can be started and stopped at any time by the platform. This allows these platforms to streamline and reallocate resources where they best benefit the user.
On the web, there has historically been no such lifecycle, and apps can be alive indefinitely. With large numbers of web apps (and tabs) running, critical resources such as memory, CPU, battery, and network can be oversubscribed, leading to a bad end-user experience.
In Chrome 68, developers will be able to listen for and respond to system-initiated CPU suspension of backgrounded tabs using the new
freeze and
resume events. In cases where a frozen page needs to be discarded to conserve memory, the
document.wasDiscarded property is now available so developers can restore view state (saved in the
freeze event) when the user refocuses the tab and the page is reloaded. Developers wanting to test these events in their own applications can visit
chrome://discards to simulate page freezing, resuming, and discarding.
For more information on the Page Lifecycle API, refer to the
specification or the
explainer on GitHub.
Other features in this release
CSS
Accept two values in the overflow shorthand
The
overflow shorthand
will accept two values, making it possible to set the horizontal and vertical overflow to different values. If two values are specified, the first is
overflow-x and the second is
overflow-y. Changing the shorthand allows developers to specify a single statement where previously two were required.
CSS position values with three parts
The
object-position and
perspective-origin properties
will no longer accept three-part values like
"top right 20%". This also applies for positions in basic shapes and gradients. Valid position values will now always have 1, 2 or 4 parts. Deprecation of 3-part values occurred in Chrome 66.
Support 'x' as a resolution unit
CSS Values and Units Module Level 4 defines a new resolution unit called "dot per pixel" for support of high-resolution displays. This change adds
'x' as a synonym for the existing abbreviation,
'dppx'.
Unprefix CSS "grab" and "grabbing" values for cursor property
The CSS values "grab" and "grabbing" change the mouse cursor to an open hand or closed hand, commonly used to indicate that something can be grabbed or is currently grabbed. Prefixed versions of these properties have been supported since Chrome 1. With this change
Chrome will support the standard, unprefixed versions of these values.
Gamepads
High resolution timestamp for Gamepad
Gamepad.timestamp now uses a
DOMHighResTimeStamp, a high resolution monotonic time with microsecond resolution. Timestamps are measured as offsets from the
PerformanceTiming.navigationStart property.
Custom elements
New customElements.upgrade()
This function invokes custom element constructors for custom elements whose constructors are not called yet explicitly. If a custom element is created with the
innerHTML setter and its parent node is not connected to a document, the custom element constructor is not called until it's connected. This method explicitly
allows developers to fully control the timing of custom element constructor calls regardless of connectedness.
Input
Keyboard lock
While in fullscreen,
this API allows apps to receive keys that are normally handled by the system or the browser like
Cmd-Tab/
Alt-Tab, or
Esc. Users can escape keyboard lock (and fullscreen) by holding the
Esc key for two seconds.
Make PointerEvent.fromElement and PointerEvent.toElement null
To improve consistency with other browsers,
PointerEvents for
fromElement and
toElement fields not follow the
Pointer Events Level 2 spec by
always reporting null.
In a
MouseEvent (from which a
PointerEvent inherits these fields),
fromElement and
toElement are non-standard, and have been inconsistent among major browsers for many years. Moreover, there are standard and consistent alternatives already:
target and
relatedTarget.
Unified touch adjustment
Touch adjustment changes the
TouchEvent and the corresponding
PointerEvent target to a best target within the touch area.
TouchEvent coordinates will not be changed.
Treat long-press as a user gesture
Long-press is now
considered a user gesture because it indicates user interaction with the page. This allows a web app to call restricted APIs like
navigator.vibrate() on long-press to match native behavior.
Media
WebAudio: add user selectable automation rate for AudioParams
The
AudioParam.automationRate
attribute allows the user to select whether the
AudioParam is either
"a-rate" or "k-rate". Most but not all
AudioParam attributes allow changing the rate, as given in the spec.
For example,
BiquadFilterNode with default "a-rate" automation is expensive to compute due to the complex relationship between the parameters and the filter coefficients. If this fast automation is not needed (the most typical case), the parameters can be set to "k-rate".
ServiceWorker
Improve cache management for service worker scripts
The
HTTP cache will be ignored when requesting updates to the service worker. Requests for
importScripts will still go through the HTTP cache. But this is just the default. A new registration option,
ServiceWorkerRegistration.updateViaCache is available that offers control over this behavior.
Previously, HTTP requests that checked for updates to the service worker were fulfilled by the HTTP cache by default. If a Cache-Control header was inadvertently set on a service worker, then service worker updates could be delayed, and if your service worker contained versioning information for your sites other assets, those updates would also be delayed.
WebRTC
RTCRtpSender.getParameters()/setParameters() return and control track encoding
Deprecations and interoperability improvements
Chrome sometimes deprecates, removes, or changes features to increase interoperability with other browsers. This version of Chrome includes the following such changes.
Deprecate and remove negative brightness values in filter
For compliance with specification, filter's
brightness() function
no longer accepts negative values.
Remove document.createTouch
The
document.createTouch() method
is being removed because the
Touch() constructor has been supported since Chrome 48.
Remove Document.selectedStylesheetSet and Document.preferredStylesheetSet
The
Document.selectedStylesheetSet and
Document.preferredStylesheetSet attributes are
removed because they are non-standard and only implemented by Chrome and WebKit. The standard versions of these attributes were removed from the spec in 2016.
WEBGL_compressed_texture_atc
Previously, Chrome provided the AMD_compressed_ATC_texture formats. Hardware support has dwindled to near-zero, so the extension has been rejected by the WebGL Working Group.
Support for it has been removed.