All Feeds | XSL | RSS | Embed | Edit

Reducing Chrome crashes caused by third-party software

Roughly two-thirds of Windows Chrome users have other applications on their machines that interact with Chrome, such as accessibility or antivirus software. In the past, this software needed to inject code in Chrome in order to function properly; unfortunately, users with software that injects code into Windows Chrome are 15% more likely to experience crashes. With Chrome extensions and Native Messaging, there are now modern alternatives to running code inside of Chrome processes. Starting in July 2018, Chrome 68 will begin blocking third-party software from injecting code into Chrome on Windows.

These changes will take place in three phases. In April 2018, Chrome 66 will begin showing affected users a warning after a crash, alerting them that other software is injecting code into Chrome and guiding them to update or remove that software.

In Chrome 66 a warning will be shown to users with third-party software that injects into Chrome.


In July 2018, Chrome 68 will begin blocking third-party software from injecting into Chrome processes. If this blocking prevents Chrome from starting, Chrome will restart and allow the injection, but also show a warning that guides the user to remove the software. Finally, in January 2019, Chrome 72 will remove this accomodation and always block code injection.

While most software that injects code into Chrome will be affected by these changes, there are some exceptions. Microsoft-signed code, accessibility software, and IME software will not be affected. As with all Chrome changes, developers are encouraged to use Chrome Beta for early testing.

Fewer crashes means more happy users, and we look forward to continuing to make Chrome better for everyone.

Posted by Chris Hamilton, Chrome Stability Team

Expanding user protections on the web

One of the advantages of the web is that it allows developers to create any type of experience they can imagine, which has led to the rich diversity of content available on the web today. While most content producers are interested in providing excellent experiences for their users, we've found that a small number use the flexibility and power of the web to take advantage of users and redirect them to unintended destinations. 1 out of every 5 feedback reports from Chrome users on desktop mention encountering some type of unwanted content, and we take this feedback seriously when considering how to improve Chrome. Following on from features like Chrome's pop-up blocker and autoplay protections, over the next few releases we'll be rolling out three new protections designed to give users all the web has to offer, but without many of these types of unwanted behaviors.

One piece of feedback we regularly hear from users is that a page will unexpectedly navigate to a new page, for seemingly no reason. We've found that this redirect often comes from third-party content embedded in the page, and the page author didn't intend the redirect to happen at all. To address this, in Chrome 64 all redirects originating from third-party iframes will show an infobar instead of redirecting, unless the user had been interacting with that frame. This will keep the user on the page they were reading, and prevent those surprising redirects.
An example of a redirect being blocked on a test site. The iframes embedded in the site are attempting to navigate the page to an unintended destination, but Chrome prevents the redirect and shows an infobar.

When the user interacts with content, things can also go wrong. One example that causes user frustration is when clicking a link opens the desired destination in a new tab, while the main window navigates to a different, unwanted page. Starting in Chrome 65 we'll also detect this behavior, trigger an infobar, and prevent the main tab from being redirected. This allows the user to continue directly to their intended destination, while also preserving the context of the page they came from.

Finally, there are several other types of abusive experiences that send users to unintended destinations but are hard to automatically detect. These include links to third-party websites disguised as play buttons or other site controls, or transparent overlays on websites that capture all clicks and open new tabs or windows. 
Two types of abusive experiences where a deceptive site control appears to do one thing, but has a different behavior when clicked. One looks like a play button on a video but sends the user to an unwanted download when clicked (left), and the other looks like a close button but instead opens unwanted pop-up windows (right).

Similar to how Google Safe Browsing protects users from malicious content, starting in early January Chrome's pop-up blocker will prevent sites with these types of abusive experiences from opening new windows or tabs. To help site owners prepare for this change, today we're also launching the Abusive Experiences Report alongside other similar reports in the Google Search Console. Site owners can use the report to see if any of these abusive experiences have been found on their site and improve their user experience. Otherwise, abusive experiences left unaddressed for 30 days will trigger the prevention of new windows and tabs.

Together, these protections will dramatically improve users' web browsing experiences while still allowing them access to all that the web has to offer. 

Posted by Ryan Schoen, Product Manager

Chrome 63 Beta: Dynamic module imports, async iterators and generators, Device Memory API, and permissions UI changes

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

Blink > CSS


Blink > Fonts

Blink > HTML

Blink > JavaScript

Blink > MediaStream

Blink > Network

Blink > Sensor

Blink > Storage

UI > Browser > Mobile (Android)


Deprecations and interoperability improvements

Blink > Bindings

Blink > CSS


Blink > DOM


Sathya Gunasekaran, Lazily-Loaded Engineer

Introducing the Chrome User Experience Report

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

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

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.


Figure: A 3D rendering being live-captured and streamed to a peer connection using WebRTC.

Other features in this release

Deprecations and interoperability improvements


Posted by Ben Greenstein and Tarun Bansal, The Network’s Watch

Unified autoplay

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

Run multiple versions of Chrome side-by-side

By default, when users install Chrome, they receive the most stable and supported build available. However, Chrome fans and web developers have long been able to opt into new Chrome features by installing pre-release packages such as Chrome Beta and Dev. Historically it's been impossible to install these pre-releases on the same computer as stable Chrome, forcing developers to choose between testing their site in the next version of Chrome and experiencing their site as users see it now.

Starting today, Chrome Beta and Chrome Dev can be installed on the same Windows computer as stable Chrome and run simultaneously, allowing developers to more easily test their site across multiple versions of Chrome. This means side-by-side Chrome installation is available on Windows, Android, and Linux, and will be made available on other platforms in future releases.


Chrome, Chrome Beta, and Chrome Dev can now be installed side by side on the same Windows computer. 

To install Chrome Beta or Chrome Dev, visit the Chromium release channels page. If you already have Chrome Dev or Beta and wish to run it side-by-side with stable Chrome, you'll need to uninstall it and then reinstall from this page. To easily transfer your bookmarks, settings, and other data, sign in to Chrome before you uninstall. And if you see something not quite right in Chrome Dev or Beta, please send us feedback.

Posted by Greg Thompson, Bitmason

Chrome 61 Beta: JavaScript modules, Payment Request API on desktop, Web Share API, and WebUSB

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.
JavaScript modules
Modules allow developers to declare a script's dependencies and are already popular in third-party build tools, which use them to bundle only the required scripts. This release adds native support for JavaScript modules via the new <script type=module> element.


Native support means the browser can fetch granular dependencies in parallel, taking advantage of caching, avoiding duplications across the page, and ensuring the script executes in the correct order, all without a build step.


To get started, learn more about JavaScript modules and the aspects of the JavaScript language affected by modules.

Payment Request API on desktop

The Payment Request API is now available for Windows, Mac, Linux, and ChromeOS, following the announcement of Android support last year. Developers can now offer secure, seamless checkout experiences across platforms. To get started, “check out” our integration guide.
The PaymentRequest process throughout a transaction.

Web Share API

To allow users to easily share content on social networks, developers have had to manually integrate sharing buttons into their site for each social service. This often leads to users not being able to share with the services they actually use, in addition to bloated page sizes and security risks from including third-party code.


Sites can now use the new navigator.share API on Chrome for Android to trigger the native Android share dialog, allowing the user to easily share text or links with any of their installed native apps. In a future release, this API will also be able to share to installed web apps.


The navigator.share API allows the user to share content with a variety of native apps via the native Android share dialog.

WebUSB

Most hardware peripherals such as keyboards, mice, printers, and gamepads are supported by high-level web platform APIs. To use specialized educational, scientific, or industrial USB peripherals, users must find and install potentially unsafe drivers and software with system-level privileges.


Chrome now supports the WebUSB API, allowing web apps to communicate with peripherals given a user's consent. This enables all the functionality provided by these devices, while still preserving the security guarantees of the web.

Other features in this release

  • The Network Information API is now available on desktop as well as Android, enabling sites to access the underlying connection information of a device.
  • Developers can now specify scrolling smoothness via a new optional parameter in existing Scroll APIs or with the scroll-behavior CSS property.
  • The CSSOM View Smooth Scroll API brings native smooth scrolling to the platform through a the scroll-behavior: smooth CSS property or by using the window.scrollTo() DOM scroll method, eliminating the need to implement this behavior with JavaScript
  • CSS color values can now be 8- and 4-digit hex colors of the format #RRGGBBAA and #RGBA.
  • Sites can now access the relative positions of the screen content with the Visual Viewport API, exposing complex functionality like pinch-and-zoom in a more direct way.
  • The Device RAM API is now available, exposing the amount of RAM on a user’s device to sites to optimize overall performance of a web application.
  • When navigating from an installed web app to a site outside the initial web app’s scope, the new site now automatically loads in a Custom Chrome Tab.
  • For video using native controls, Chrome will now automatically expand video to fullscreen when a user rotates their device in an orientation that matches a video playing on the screen.
  • nextHopProtocol is now available in Resource Timing and Navigation Timing, providing access to the network protocol used to fetch a resource.  
  • Sites can now require embedded third-party content to enforce a given Content Security Policy via the new csp attribute on <iframe> elements.
  • The DOMTokenList interface now supports replace() to easily change all identical tokens to a new one, such as active to inactive on expiration.
  • To access a list of attribute names of an element, getAttributeNames() is now supported and gives developers a more direct mechanism than going through the attributes collection.
  • To increase security, sites will now automatically exit full screen if a JavaScript dialog opens.
  • Sites can now access an estimate for the disk space used by a given origin and quota in bytes via the Storage API’s new navigator.storage.estimate() function.
  • To improve the browser’s cache hit rate, URLSearchParams now supports sort() to list all stored name-value pairs.
  • The URLSearchParams constructor has been updated to accept any object as a parameter instead of only other URLSearchParams instances.
  • To prevent the use of mis-issued certificates from going unnoticed, sites can use the new Expect-CT HTTP header which will enable automated reporting and/or enforcement of Certificate Transparency requirements.
  • Chrome will no longer decode frames for videos using Media Source in background tabs.
  • "Non-Live" camera settings such as photo resolution, red eye reduction, and flash mode can now be retrieved with ImageCapture.getPhotoSettings().
  • Sites can now use the Clear-Site-Data header to delete their own client-side data, such as cookies, service workers, storage, and cache entries.


Deprecations and interoperability improvements

  • To increase security, resources with URLs containing both \n and < characters will now be blocked.
  • To increase security, support for the Presentation API’s start function has been deprecated and removed for insecure contexts.
  • To align with the spec and preserve browser consistency, the scrollingElement is now the documentElement in standards mode.
  • To increase consistency across on<event> attributes, onwheel attributes have been moved from Element to Window, Document, HTMLElement, and SVGElement.
  • To better follow spec and provide more granular control over the flow of referred content, Chrome now supports three new Referrer Policy values, same-origin, strict-origin, and strict-origin-when-cross-origin.
  • Following the change in spec, the maximum value for colSpan has been decreased from 8190 to 1000.

Posted by Domenic Denicola, Maverick Modulator

So long, and thanks for all the Flash

This morning, Adobe announced their plans to end support for Flash in late 2020. For Flash developers this will mean transitioning to HTML, as Chrome will increasingly require explicit permission from users to run Flash content until support is removed completely at the end of 2020.

HTML is faster, safer, and more power efficient than Flash and works across desktop and mobile. Three years ago, over 80% of Chrome daily desktop users visited sites with Flash. Today only 17% of users visit sites with Flash and we’re continuing to see a downward trend as sites move to HTML.

Over a three-year period, Flash usage has declined 80%.


We strongly encourage sites that still rely on Flash to make the move to HTML as there will be an increasing number of restrictions on Flash leading up to the end of support:

Flash helped make the web a rich, dynamic experience, and shaped the modern set of web standards. We recognize that any transition can have challenges, but we will continue to work closely with Adobe and the web community to ensure that users have a great experience and to help developers make the web transition to HTML.

Posted by Anthony Laforge, on behalf of the Chrome team

Chrome 60 Beta: Paint Timing API, CSS font-display, and Credential Management API improvements

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.

Paint Timing API

While no generalized metric perfectly captures when a page is loaded in all cases, First Paint and First Contentful Paint are invaluable numbers to measure critical user moments during loading. To give developers better insight into their site’s loading performance, the new Paint Timing API exposes metrics that capture First Paint and First Contentful Paint.
Screen Shot 2017-06-08 at 8.57.03 AM.png
Stills of a First Paint and First Contentful Paint for Google.com, from “Web Performance: Leveraging the Metrics that Most Affect User Experience” at Google I/O 2017

CSS font-display

Downloadable web fonts are often used to create more visually rich web experiences. Historically, Chrome has delayed rendering text until the specified font is available, to ensure visual correctness. However, downloading a font can take as long as several seconds on a poor connection, significantly delaying the time until a user sees content. Chrome now supports the CSS @font-face descriptor and corresponding font-display property, allowing developers to specify how and when Chrome displays text content while downloading fonts.

Credential Management API improvements

In response to developer feedback and to make the Credential Management API easier to use for all sites, the need for a custom fetch() to access the stored password is now deprecated. Starting in Chrome 60, the user’s password will now be returned directly as part of the PasswordCredential.

In addition, we've made a series of changes to better align with the work being done in the Web Authentication Working Group. This includes the deprecation of requireUserMediation, which has been renamed to preventSilentAccess.

Other features in this release

Deprecations and interoperability improvements



Posted by Shubhie Panicker, Paint Timing Promoter

Improving advertising on the web

Advertising is a critical component of the web, keeping content open and free for everyone. However, over the years we've increasingly heard from users that while some types of advertising are fine, others can seem overwhelmingly frustrating or intrusive. Due to these poor ad experiences, the usage of extensions that block ads across the web continues to rise, up about 30% from just last year. This reduces the ability for publishers to continue creating free content and threatens the sustainability of the web ecosystem.

Chrome has always focused on giving users the best possible experience browsing the web. For example, Chrome, like other browsers, prevents pop-ups in new tabs based on the fact that they are annoying. Today, we have an even better understanding of the types of experiences that bother users when it comes to unwanted advertising. New public, consumer-driven research done by the Coalition for Better Ads in creating the Better Ads Standards outlines a number of these experiences, such as full-page ad interstitials, ads that unexpectedly play sound, and flashing ads. In dialog with the Coalition and other industry groups, we plan to have Chrome stop showing ads (including those owned or served by Google) on websites that are not compliant with the Better Ads Standards starting in early 2018.

We know that many web developers make most or all of their revenue from digital advertising, and we want to make following the guidance of the standard as easy as possible. Starting today we're rolling out the Ad Experience Report, a new tool which provides screenshots and videos of annoying ad experiences we’ve identified to make it easy to find and fix the issues. Developers can also use the report to re-submit their site for review once the problematic ad experiences have been addressed.

This is just one step toward making advertising an excellent experience across the web, and we plan to continue integrating user feedback with developer needs to help balance the web ecosystem for all.

Posted by Rahul Roy-Chowdhury, VP Product Management

Goodbye PNaCl, Hello WebAssembly!

Historically, running native code on the web required a browser plugin. In 2013, we introduced the PNaCl sandbox to provide a means of building safe, portable, high-performance apps without plugins. Although this worked well in Chrome, it did not provide a solution that worked seamlessly across all browsers.


Since then the web community has rallied around WebAssembly, as a cross-browser solution to high performance code. WebAssembly provides the speed necessary to build an in-browser video editor or run a Unity game at a high frame rate utilizing existing standards-based web platform APIs. Applications using WebAssembly already run in multiple browsers: Chrome and Firefox support WebAssembly natively and Edge and Safari support WebAssembly in preview versions of their browsers.


Given the momentum of cross-browser support, we plan to focus our native code efforts on WebAssembly going forward. We will remove support for PNaCl in the first quarter of 2018 everywhere except inside Chrome Apps and Extensions. We believe that the ecosystem around WebAssembly makes it a better fit for new and existing high-performance web apps, and that usage of PNaCl is sufficiently low to warrant deprecation.


We recognize that technology migrations can be challenging. To help ease the transition we have prepared a set of recommendations for existing PNaCl implementations to migrate to the web platform, as well as a feature roadmap for WebAssembly. As you embark on the migration process, please let us know if you run into any challenges, so that we can help make the shift as smooth as possible.


With the launch of WebAssembly, the web platform has gained a foundation for a new generation of fast and immersive web apps that run in any browser. We’re excited to see what developers build next!



Posted by Brad Nelson, Software Engineer on NaCl, PNaCl, and WebAssembly

The Modern Mobile Web: State of the Union

Posted by Rahul Roy-chowdhury, VP Product Management, Chrome


What a difference a year makes. Last year at Google I/O, we shared that the mobile web was open for business. New technologies such as AMP and Progressive Web Apps (PWAs) were bringing new capabilities, better performance, and a streamlined workflow to the mobile web.


Fast forward one year later: more than two billion AMP pages have been created and "PWA" has proved to be far more than a buzzword—it’s now the way that many businesses around the world are building for mobile devices. For more details, take a look at the video from Google I/O on the latest mobile web state of the union, or read below on how these technologies are making the modern mobile web mainstream.


Momentum
Summing up all the great success stories from around the world in a single post is a tall order, but here are some highlights.


To improve the performance of Wego's mobile site, the company built AMP pages using amp-install-serviceworker to transition to a fast PWA experience. Average page load time decreased from 12 seconds to less than one second, and conversion rates increased by 95%.


When Forbes rebuilt their mobile website as a PWA, they began by re-thinking what their experience could look like on a phone. Instead of minimally updating their underlying site, Forbes integrated PWA technologies to provide an immersive, app-like experience. They saw immediate improvements and engagement rates have more than doubled since launch.



Ola, the leading cab aggregator in India, built a PWA and noticed that 20% of users who book using their PWA had previously uninstalled their app. By reducing the amount of storage space needed, the PWA allowed them to effectively re-engage with users that otherwise would have been lost.


Another success story is Twitter Lite, a PWA which minimizes data usage, is resilient on unreliable mobile networks, and is less than 1MB of space on a device. Twitter's new mobile experience is also optimized for speed, with up to 30% faster launch times as well as quicker navigation throughout the site. They've found that users are spending 2.7x more time on site, and as a result are seeing 76% more tweets on the new PWA than their previous mobile site. Twitter is seeing incredible re-engagement with 1 million sessions initiated a day from icons added to the Android homescreen.


Polished Experiences
Users expect a lot from their mobile devices, and we've added tons of APIs over the past year to meet that demand. The mobile web can support more use cases and get more done than ever before. A few highlights:

  1. Improved Add to Homescreen
Earlier this year we unveiled Improved Add to Homescreen, integrating PWAs much deeper into the Android operating system. Now, in addition to being displayed on the homescreen, PWAs are also displayed in the app launcher and Android settings alongside native apps, and can also open in response to users clicking links in Chrome or other apps.

  1. Payments
Checkout can be a complicated process. To improve payment flows on the web, we launched a one-tap payment API called Payment Request. Using this API allows web apps to support credit cards and Google payment mechanisms such as Android Pay. We also just announced that it is now possible to integrate this API with additional payment apps.

  1. Media Consumption
Over 70% of internet traffic is video. To allow great mobile web media experiences we have given the users more control over playback with the Media Session API, improved full screen playback with the Screen Orientation API, and we’re filling out features for offline with Background Fetch. To learn more, see our mobile web media best practices and see how the APIs can come together at our PWA for Media demo.



Tooling
We’ve also been working hard to improve and extend the set of tools that let you build engaging experiences on the web.


Lighthouse is a new automated tool for measuring the quality of a web experience. It runs nearly 100 audits against your web app, checking everything from page performance, to byte efficiency, to accessibility, and gives you a summary score. New integration with Chrome's DevTools means you’ll be able to run Lighthouse audits without leaving the browser.


Polymer 2.0 is the next major release of the Polymer library, re-built from the ground up to take advantage of the best new features of the modern web platform. This release uses new Web Component API’s that have shipped in Chrome and Safari. It’s completely modular and best of all - it’s now 10% faster and 80% smaller.


Chrome is committed to making sure that you can develop easily, engage with your users, and build a thriving business around the web. For the latest news, subscribe to our YouTube channel and follow us on Twitter @ChromiumDev.

Happening now: The Mobile Web State of the Union


Welcome to Google I/O 2017! Today at 4PM Pacific Daylight Time, Rahul Roy-chowdhury, VP Product Management for Chrome, will be on stage at Google I/O discussing The Mobile Web: State of the Union. Tune into the livestream below, and if you happen to be attending Google I/O, be sure to come to the Amphitheatre to see it live!
Posted by Ryan Schoen, Product Manager

Improving extension security with out-of-process iframes

Security is critical to Chrome, and many features protect Chrome users as they browse the web. Google Safe Browsing warns users away from websites known to be dangerous. Chrome’s sandbox and multi-process architecture provide additional layers of defense by helping block malware installation and reducing the severity of vulnerabilities. In Chrome 56, we've added yet another layer of defense by fully isolating Chrome extension privileges from web pages.


Chrome has always kept extensions and web pages in different processes where possible, but sometimes extensions host web content in iframes. For example, an extension's options page may include social network buttons or ads. Until recently, these web iframes ran inside the extension's process. This is usually safe because security checks inside that process do not allow web iframes to use extension APIs. However, in rare cases malicious web iframes could exploit bugs to bypass these checks and use the same privileged APIs that are available to extensions, like chrome.history.


Chrome now uses out-of-process iframes to ensure that extension-hosted web iframes are never put into their parent extension process. Even if an extension's web iframe finds a Chrome bug and takes over its own web process, that process won't have access to extension APIs.

With this launch, web iframes in extension pages now run in a separate process from the extension, adding an extra layer of protection to privileged APIs.


Introducing out-of-process iframes will greatly strengthen Chrome's security model, though building them required a large change to Chrome's architecture affecting systems like painting, input events, and navigation. This launch is just the first phase of our Site Isolation project, so stay tuned for even more security improvements that out-of-process iframes make possible.



Posted by Charlie Reis, Site Isolator

Chrome 59 Beta: Headless Chromium, native notifications on macOS, and service worker navigation preload

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.

Headless Chromium

Headless Chromium allows running Chromium in an automated environment without a user interface or peripherals. This enables use cases such as automating unit tests with Selenium and converting a web page into a PDF.



Headless Chromium is powered by all the modern web platform features provided by Chromium and Blink. Support is now available on Mac and Linux, with a Windows implementation coming soon.

Native notifications on macOS

Chrome has historically included its own notification system for web and extension developers to send notifications to users. In response to macOS introducing its own rich notification system, many users have asked for the two systems to be integrated.  



In Chrome 59, when developers send notifications via the Notifications API or chrome.notifications, they will be shown directly by the macOS native notification system. This change improves the user experience, but some low-usage API features are now discouraged since they result in a degraded experience on macOS, as documented in the migration guide.


TMPNOTIF.png
Chrome notifications before and after integration with the native notification system.


Service worker navigation preload

The Service Worker navigation preload API enables the browser to preload navigation requests while a service worker is starting up. These requests are started before executing the fetch event handler in the service worker intercepting the target URL. This gives the worker access to the preload response inside the fetch event handler, allowing the service worker to handle the navigation with minimal delay.

Other features in this release

Deprecations and interoperability improvements


Posted by Sami Kyostila, Headless Honcho

Next steps toward more connection security

In January, we began our quest to improve how Chrome communicates the connection security of HTTP pages. Chrome now marks HTTP pages as “Not secure” if they have password or credit card fields. Beginning in October 2017, Chrome will show the “Not secure” warning in two additional situations: when users enter data on an HTTP page, and on all HTTP pages visited in Incognito mode.
Treatment of HTTP pages in Chrome 62

Our plan to label HTTP sites as non-secure is taking place in gradual steps, based on increasingly broad criteria. Since the change in Chrome 56, there has been a 23% reduction in the fraction of navigations to HTTP pages with password or credit card forms on desktop, and we’re ready to take the next steps.

Passwords and credit cards are not the only types of data that should be private. Any type of data that users type into websites should not be accessible to others on the network, so starting in version 62 Chrome will show the “Not secure” warning when users type data into HTTP sites.

Treatment of HTTP pages with user-entered data in Chrome 62

When users browse Chrome with Incognito mode, they likely have increased expectations of privacy. However, HTTP browsing is not private to others on the network, so in version 62 Chrome will also warn users when visiting an HTTP page in Incognito mode.

Eventually, we plan to show the “Not secure” warning for all HTTP pages, even outside Incognito mode. We will publish updates as we approach future releases, but don’t wait to get started moving to HTTPS! HTTPS is easier and cheaper than ever before, and it enables both the best performance the web offers and powerful new features that are too sensitive for HTTP. Check out our set-up guides to get started.

Posted by Emily Schechter, Chrome Security Team

Real-world JavaScript performance

The V8 JavaScript engine is a cornerstone of fast browsing in Chrome. Over the course of the past year, the V8 team has developed a new method for measuring performance against snapshots of real web pages. Using insights from real-world measurements, the V8 team improved the speed of the average page load in Chrome by 10-20% over the course of the past year.


Historically, JavaScript engines such as V8 used benchmarks like Octane to improve the “peak” performance of JavaScript, or the performance of CPU-intensive script in hot loops. At the beginning of last year, the V8 team started to measure performance with higher fidelity by instrumenting snapshots of popular web pages such as Reddit, Twitter, Facebook, and Wikipedia. This analysis revealed that while peak performance benefits certain types of large web applications, browsing typical websites relies more on “startup” performance, or the speed it takes to start running script. Using insights gleaned from this real-world performance data, the V8 team implemented optimizations which improved mean page load between Chrome 49 and Chrome 56 by 10-20%, depending on CPU architecture.


The web page snapshots also enabled analysis of the differences between various benchmarks and real web workloads. Although no benchmark can be a representative proxy for all sites, the Speedometer benchmark is an approximation of many sites due to its inclusion of real web frameworks including React, Angular, Ember, and jQuery. This similarity can be seen in the startup optimizations above, which also yielded a 25-35% improvement in Chrome’s Speedometer score. Conversely, comparing page snapshots to Octane revealed that Octane was a poor approximation of most websites. Given the plateau of Octane scores across web browsers and the over-optimization of peak performance, we decided to retire the benchmark as a general-purpose measure of real-world JavaScript performance.

V8 performance optimizations improved Chrome's Speedometer score by 25-35% over the past year


Going forward, we plan to ship more JavaScript performance improvements for new patterns of script appearing on the web, including modern libraries, frameworks, and ES2015+ language features. By measuring real-world websites rather than traditional benchmarks, we can better optimize JavaScript patterns that matter most to users and developers. Stay tuned for updates about our new engine architecture, designed for real-world performance.


Posted by Seth Thompson, V8 Track Commentator

Scroll anchoring for web developers

One of the strengths of the web is progressive loading, which means that there is no install step and users can start consuming content almost immediately while the site keeps loading. But progressive loading can also result in annoyances, such as an unexpected page jump when offscreen content loads and pushes down what’s currently on the screen. This can be even worse on mobile devices, since smaller screens mean more content is offscreen and page jumps are more likely.



Since its early days, Chrome has taken a stand against bad or abusive content. For instance, Safe Browsing warns users before they visit malicious websites, and visual indicators on tabs allow our users to quickly track down the source of unexpected noise. Similar to other features designed to protect our users from bad experiences, starting in version 56 Chrome prevents these unexpected page jumps with a new feature called scroll anchoring. This feature works by locking the scroll position on an on-screen element to keep our users in the same spot even as offscreen content continues to load.


Side by side comparison of a web page with scroll anchoring disabled (left) and enabled (right).



Due to the expressiveness of the web, there might be some content for which scroll anchoring is either unwanted or misbehaving. For this reason, this feature ships alongside the ”overflow-anchor” CSS property to override the functionality. To further minimize potential issues, scroll anchoring is disabled on complex interactive layouts via suppression triggers, and on back/forward navigations to allow for scroll restoration.



Today, scroll anchoring is preventing about three page jumps per page-view, but with your help it could be even better. Get involved by participating in the scroll anchoring Web Platform Incubator Community Group, submitting feedback via g.co/reportbadreflow, and designing your websites or services with a no-reflow mindset.


Posted by Steve Kobes, “The Unbouncer”

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

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

Deprecations and interoperability improvements


Posted by Victor Costan, IndexedDB Interloper

Faster 3D rendering with WebGL 2.0

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
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 Flood1, 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.

Reducing power consumption for background tabs

Efficient power usage is an important aspect of speed, one of Chrome’s key pillars. To prolong battery life, Chrome should minimize power impact from things users can’t see. This includes background tabs,  which consume a third of Chrome's power usage on desktop. Starting in version 57, Chrome will throttle individual background tabs by limiting the timer fire rate for background tabs using excessive power.



Chrome has focused on improving the user experience by throttling tab performance for many years. Like many browsers, Chrome has limited timers in the background to only run once per second. Via the new throttling policy, Chrome 57 will delay timers to limit average CPU load to 1% of a core if an application uses too much CPU in background. Tabs playing audio or maintaining real-time connections like WebSockets or WebRTC won’t be affected.



We've found that this throttling mechanism leads to 25% fewer busy background tabs. In the long-term, the ideal is for background tabs to be fully suspended and instead rely on new APIs for service workers to do work in the background. Chrome will continue to take steps in this direction to prolong users' battery life, while still enabling all the same experiences developers can build today.


Posted by Alexander Timin, Software Engineer and Power Saver

Chrome 57 Beta: CSS Grid Layout, Improved Add to Home screen, Media Session API

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.



CSS Grid Layout

Sites are increasingly being accessed on screens of all sizes, from large LCD TVs to tiny watch faces. Historically, supporting all of these screen sizes required complex combinations of markup and CSS, making code hard to maintain. To give developers more granular control over how elements grow and shrink to fit the current screen size, CSS Grid Layout is now available.




CSS Grid supports a two-dimensional grid-based layout system, optimized for responsive user interface design. Elements within the grid can be specified to span multiple columns or rows. Elements positioned in a CSS grid can also be named, making layout code easier to understand.
Screenshot 2017-01-25 20.06.19.png
CSS Grid allows developers to arbitrarily place elements on a grid with full control over element flow, sizing behavior and responsiveness.

Improved Add to Home screen


Update (2017/03/09): Improved Add to Home screen is now planned to launch in Chrome 58.

Since early versions of Chrome for Android, users have been able to add sites to their Home screen for fast and convenient access. This feature adds the icons using Android shortcuts, which means that web apps don’t show up throughout Android in the same way as installed native apps.




In this release, when a user adds a Progressive Web App to their Home screen, Chrome will integrate it into Android in a much deeper way. For example, Progressive Web Apps will now appear in the app drawer section of the launcher and in Android Settings, and will be able to receive incoming intents from other apps. Long presses on their notifications will also reveal the normal Android notification management controls rather than the notification management controls for Chrome.

Media Session API

Media consumption is one of the most common uses for the mobile web. In Chrome for Android, developers can customize the lock screen UI and notifications with media content using the new Media Session API. By providing metadata to the browser about the content being played, developers can create rich lock screen messaging that includes information such as title, artist, album name, and artwork. Additionally , the site is now able to respond to user actions taken on the notification itself, such as seeking or skipping.


media-session-tldr-with-cc.png

Other features in this release

Deprecations and interoperability improvements


Posted by Xi Han, Home Screen Heroine

Integrating Progressive Web Apps deeply into Android

In 2015, we added a new feature to Chrome for Android that allows developers to prompt users to add their site to the Home screen for fast and convenient access. That feature uses an Android shortcut, which means that web apps don’t show up throughout Android in the same way as installed native apps. For example, many developers have asked for their web app to show up in the app drawer section of the launcher. These differences can be confusing for users and prevent the experience from feeling as cohesive as it could.



In the next few weeks we’ll be rolling out a new version of this experience in Chrome beta. With this new version, once a user adds a Progressive Web App to their Home screen, Chrome will integrate it into Android in a much deeper way than before. For example, Progressive Web Apps will now appear in the app drawer section of the launcher and in Android Settings, and will be able to receive incoming intents from other apps. Long presses on their notifications will also reveal the normal Android notification management controls rather than the notification management controls for Chrome.




This new Add to Home screen feature is one more step in our journey to empower developers to build the best possible experience for their users, and we are committed to ensuring the same mechanisms for installing Progressive Web Apps are available to all browsers on Android.


Posted by Yaron Friedman, Add to Home screen aficionado