Chromium Blog: March 2017

Chrome 58 Beta: IndexedDB 2.0, an improvement to iframe navigation, and immersive full screen for PWAs

Tuesday, March 21, 2017

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows. IndexedDB 2.0 The IndexedDB 2.0 standard is now fully supported in Chrome, making it simpler to work with large data sets in the browser. IDB 2.0 features new schema management, bulk action methods, and more standardized handling of failures.

The structure of a site’s database has large performance impacts and can be difficult to change. To simplify updates, object stores and indexes can now be renamed in-place after a refactoring. Sites can also use more natural keys without worrying about a performance penalty thanks to binary keys, which allow compact representations for custom keys.
Data retrieval is easier with the getKey() and openKeyCursor() methods, which also provide better performance when only a database key is needed. The new continuePrimaryKey() cursor method makes it easier to divide large data access across transactions and page loads without worrying about duplicate primary keys. The getAll() and getAllKeys() methods allow bulk recovery of entire datasets without the need for a cursor. An improvement to iframe navigation

Third-party content, such as advertising, that automatically redirects the page can annoy users and create security issues. Because of this, developers are able to put third-party content inside sandboxed iframes to prevent this behavior. However, in some cases this type of content needs to navigate the top-level page when clicked, like a standard advertisement.

To address this, Chrome 58 now supports the new iframe sandbox keyword allow-top-navigation-by-user-activation. This keyword gives sandboxed iframes the ability to navigate the top-level page when triggered by user interaction, while still blocking auto-redirects. Immersive full screen for PWAs When Progressive Web Apps (PWAs) are launched from the Android Home screen, they launch in a standalone app-like mode that hides the omnibox. This helps create an engaging user experience, and frees up screen space for content. However, for even more immersive experiences like games, video players, or other rich content, other mobile UI elements such as the system bars can still be a distraction.
Now PWAs can provide a fully immersive experience by setting display: fullscreen in their web app manifest, which hides non-app UI when the site is launched from the home screen.

A PWA launched from the home screen (left), launched from the home screen in standalone mode (middle), and launched from the home screen in fullscreen mode (right). Other features in this release

Workers and SharedWorkers can now be created using data: URLs, making development with Workers more secure by giving them an opaque origin.

PointerEvents.getCoalescedEvents() allows developers to access all input events since the last time a PointerEvent was delivered, making it easier for drawing apps to create smoother curves using a precise history of points.

Developers can now customize Chrome’s native media controls such as the download, fullscreen and remoteplayback buttons using the new ControlsList API.

On Chrome for Android, sites installed using the improved Add to Homescreen flow will be allowed to autoplay audio and video served from origins included in the manifest’s scope without restrictions.

On Chrome for Android, videos using the autoplay attribute will be paused when offscreen and resumed when back in view to preserve consistency across browsers.

Sites can now access the approximate range of colors supported by Chrome and output devices using the color-gamut Media Query.

Instead of manually resetting multiple layout properties like float and clear, sites can now add a new block-formatting context using display: flow-root.

To improve JavaScript parsing time, SVGPoint, SVGRect, and SVGMatrix have been transferred to new interfaces outside of Geometry.

Using removeRange(), a new Selection API function, developers can now programmatically remove a specified text Range.

The PointerEvent.tangentialPressure and PointerEvent.twist attributes are now supported on Chrome for Mac to provide more information to stylus devices and painting apps.

To simplify developer experience, trailing commas are now allowed in JavaScript for formal parameter and argument lists.

The WebAudio API’s new playback AudioContextLatencyCategory enables the developer to easily make conscious tradeoffs between latency, power, and CPU efficiency.

Deprecations and interoperability improvements

Apple-interchange-newline, Apple-converted-space, Apple-paste-as-quotation, Apple-style-span, and Apple-tab-span have been deprecated as they are non-standard CSS classes.

usemap attributes now use case-sensitive matching rather than compatibility caseless to better align with spec.

Sites must now use HTTPS when requesting notification permissions or creating non-persistent local notifications with the Notifications API, in accordance with Chrome's policy around powerful features.

To better align with spec, cancelBubble is now considered an alias to stopPropagation() when set to true, and does not do anything when set to false.

The VTTRegion interface functions, addRegion() and removeRegion(), have been removed from the WebVTT spec and are therefore being removed from Chrome.

Top-level navigations to data: URLs have been deprecated to further protect users from spoofing and phishing attempts.

An instance of HTMLEmbedElement or HTMLObjectElement can no longer be called as a function, since the legacy caller has been removed.

Pre-standard ChaCha20-Poly1305 ciphers have been removed following the standardization of these algorithms at the IETF as RFC 7539 and RFC 7905, and the subsequent shipping of the standard versions in Chrome 41.

To improve interoperability, Selection.addRange() now ignores an additional range if it overlaps with an existing range, rather than merging the two ranges.

Encrypted Media Extensions transmitted over non-secure origins has been deprecated per Chrome's policy around powerful features and in compliance with the spec.

The AudioBuffer constructor now accepts the sampleRate member of an AudioBufferOptions dictionary instead of a context argument, simplifying the interface and emphasizing that AudioBuffers can be shared between AudioContexts.

The synchronous FileReaderSync API has been deprecated in service workers, as the service worker spec requires all types of synchronous requests to be initiated outside of a service worker.

The abbr and acronym elements now have a dotted underline by default to align with the HTML standard.

The motion-path, motion-offset, and motion-rotation CSS properties have been removed in favor of the new versions: offset-path, offset-distance, offset-rotate.

When accessing Selection API properties like selectionDirection, selectionStart, and selectionEnd, Chrome will now return null when it would have thrown an InvalidStateError DOMException.

Rather than silently clamping offset values that were too large, the Selection API’s setBaseAndExtent() now throws an IndexSizeError DOMException to better align with spec.

Rather than silently failing for DocumentType node inputs, the Selection API’s setBaseAndExtent(), extend(), and collapse() now throw InvalidNodeTypeError DOMException to better align with spec.

To better align with spec, getRangeAt() now always returns a new Range with position normalization.

The AudioSourceNode interface has been removed as it was not part of the WebAudio spec.

The webkitdropzone attribute has been removed as it was not widely adopted.

Posted by Victor Costan, IndexedDB Interloper

Faster 3D rendering with WebGL 2.0

Thursday, March 16, 2017

The WebGL JavaScript API exposes hardware-accelerated 3D graphics to the web. Chrome 56 brings support for WebGL 2.0, a major upgrade to the API which unlocks a variety of new graphics features and advanced rendering techniques. WebGL 2.0 is currently available for Chrome users with modern graphics hardware on Windows, macOS, and Linux, and is coming soon to Android.
Screen Shot 2017-03-15 at 3.12.13 PM.png

Screen Shot 2017-03-15 at 3.12.13 PM.png

WebGL 2.0 Transform Feedback demo (live link, Github repository)

WebGL 1.0 first launched in Chrome 6 years ago and gave web developers the ability to create immersive plugin-free graphics experiences, from remixing World Cup plays in real-time to visualizing a rock climbing route in a news article. WebGL 2.0 makes it even easier to build 3D web applications, with faster real-time rendering, new types of textures and shaders, and reduced video memory consumption. Techniques including deferred shading, tone mapping, volumetric effects, and particle effects can now be efficiently implemented. The new APIs also bring WebGL up to feature parity with OpenGL ES 3.0, a graphics platform commonly used in mobile games.

In addition to new rendering capabilities, WebGL 2.0 also introduces a substantially expanded conformance test suite with over 340,000 test cases to help ensure that different web browsers offer compatible graphics platforms. Chrome passes 100% of these test cases across multiple GPU vendors on every desktop platform, ensuring that its WebGL 2.0 implementation is stable and consistent.

To get started using WebGL 2.0, check out the WebGL 2.0 Samples Pack, which contains small self-contained examples of most new API features. You can also see WebGL 2.0 in action in After the Flood¹, an interactive demo by PlayCanvas, created in conjunction with Mozilla. Finally, check back here for more news about future graphics features, such as OpenGL ES 3.1 support and explorations into a lower-level web graphics API supporting the new explicit graphics interfaces like Vulkan, Metal, and DirectX 12.

Posted by Zhenyao Mo, Software Engineer

[1] If this demo or other WebGL 2.0 content doesn’t run on your machine, you may need to update your graphics hardware or driver.

Chromium Blog

Chrome 58 Beta: IndexedDB 2.0, an improvement to iframe navigation, and immersive full screen for PWAs

Faster 3D rendering with WebGL 2.0

Labels

Archive

Feed