Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

August 08 2016


Chrome 53 Beta: Shadow DOM, PaymentRequest, and Android autoplay

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

Shadow DOM V1

HTML, CSS, and JavaScript are powerful development languages, but they can be difficult to maintain in large code bases. Sites that embed third-party content also need to ensure that included styles do not affect other parts of their app. Chrome 53 supports Shadow DOM V1 , which allows an element to encapsulate its style and child DOM away from the main document. This improves the maintainability of large or composed sites . Shadow DOM V1 has some significant changes from the V0 version, and is broadly agreed-upon by major browser vendors. Chrome will support both versions of the API until enough developers have moved to V1. The behavior of a shadow root is determined by which API call it was created with.

PaymentRequest API

Completing payments on the web can be a cumbersome process for users, leading to lower conversions on sites. While autofill has made it easier to enter information, efficient data entry on mobile is still a challenge. PaymentRequest allows for fast, seamless, and secure payments on the web using a credit card or Android Pay . It also lets users provide a billing address, shipping details, and payer information without typing. PaymentRequest is available on Chrome for Android, with support for more platforms coming soon.

Chrome for Android autoplays muted video

Video is a great way for sites to reach their users, but it can be jarring when it plays unexpectedly. This is especially true on mobile, where the user may be in an environment where audio is unwanted. Chrome on Android now allows muted videos to begin playing without user interaction. If the video was marked as muted and has the autoplay attribute, Chrome will start playing the video when it becomes visible to the user. Developers can also use script to play muted videos without user interaction. Muted videos that begin playing sound before a user action will automatically be paused.

Other features in this release

Deprecations and interoperability improvements

Posted by Hayato Ito, Shadow DOM Chaffeur

June 29 2016


Universal rendering with SwiftShader, now open source

SwiftShader is a software library for high-performance graphics rendering on the CPU. Google already uses this library in multiple products, including Chrome, Android development tools, and cloud services. Starting today, SwiftShader is fully open source, expanding its pool of potential applications.

Since 2009, Chrome has used SwiftShader to enable 3D rendering on systems that can’t fully support hardware-accelerated rendering. While 3D content like WebGL is written for a GPU, some users’ devices don’t have graphics hardware capable of executing this content. Others may have drivers with serious bugs which can make 3D rendering unreliable, or even impossible. Chrome uses SwiftShader on these systems in order to ensure 3D web content is available to all users.

Chrome running without SwiftShader on a machine with an inadequate GPU (left) cannot run the WebGL Globe experiment. The same machine with SwiftShader enabled (right) is able to fully render the content.

SwiftShader implements the same OpenGL ES graphics API used by Chrome and Android. Making SwiftShader open source will enable other browser vendors to support 3D content universally and move the web platform forward as a whole. In particular, unconditional WebGL support allows web developers to create more engaging content, such as casual games, educational apps, collaborative content creation software, product showcases, virtual tours, and more . SwiftShader also has applications in the cloud, enabling rendering on GPU-less systems.

To provide users with the best performance, SwiftShader uses several techniques to efficiently perform graphics calculations on the CPU. Dynamic code generation enables tailoring the code towards the tasks at hand at run-time, as opposed to the more common compile-time optimization. This complex approach is simplified through the use of Reactor , a custom C++ embedded language with an intuitive imperative syntax. SwiftShader also uses vector operations in SIMT fashion, together with multi-threading technology, to increase parallelism across the CPU’s available cores and vector units. This enables real-time rendering for uses such as app streaming o n A n d r o i d.

Developers can access the SwiftShader source code from its git repository . Sign up for the mailing list to stay up to date on the latest developments and collaborate with other SwiftShader developers from the open-source community.
Posted by Nicolas Capens, Software Engineer and Pixel Pirate

June 10 2016


Chrome 52 Beta: CSS containment, simpler performance measurement, streamable responses from service workers, and more options for web push

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.
CSS Containment
Rich, interactive experiences are a cornerstone of the web, but can sometimes take a long time to render due to their complexity. Currently, Chrome improves rendering performance by using heuristics to determine which parts of a page have changed. Only sections that have changed are updated instead of rendering the entire page 60 times per second. However, because elements can display outside the bounds of their parents, it is possible that changes to one element could affect elements anywhere else in the document. This dramatically increases the number of elements that Chrome must consider while rendering.

New in this release, the CSS contain property allows developers to prevent an element’s children from displaying outside of its bounds . When an element updates, this guarantee allows Chrome to ignore any element outside the parent node during rendering, leading to faster rendering times.
Performance Observer
Collecting accurate real-user measurement (RUM) data is critical to detecting performance problems and regressions that may hurt the user experience of a site. Chrome's DevTools allow local site testing, but measuring how a site performs for real users with varied devices can be challenging. The latest version of Chrome supports the PerformanceObserver API, which enables a simple and performant way to collect RUM data at runtime. Instead of polling for updates, sites can declare which metrics they’re interested in . The browser notifies the site when new data points for those metrics become available.
Service Worker Responses Powered by ReadableStreams
Streaming HTTP responses allow browsers to progressively render earlier portions of a large HTML document before the entire response is available. The latest version of Chrome improves service workers by adding streaming support . Sites can use the Streams API to construct streamable Response objects by passing a ReadableStream to the Response constructor.
Offline Wikipedia client demonstrates the speed benefits of readable streams.
Web Push Protocol and VAPID Support
Push notifications have unlocked a new level of re-engagement for web apps, but until now developers have had to use proprietary push message delivery services and different APIs for different browsers. Chrome now supports VAPID , an open standard to authenticate a site’s server with a push service. When using VAPID, sites are given a Firebase Cloud Messaging endpoint, which supports the cross-browser web push protocol .
Other features in this release
Posted by Shubhie Panicker, Performance Powerhouse

May 19 2016


The Mobile Web Is Open for Business

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

One of the virtues of the web is its immense reach, providing access to information for all internet users regardless of device or platform. With the explosion of mobile devices, the web has had to evolve to deliver great experiences on the small screen. This journey began a few years ago, and I am excited to be able to say that the mobile web is open for business . Hear the recording from Google I/O where I discussed the state of the union and how to take advantage of new experiences like AMP and Progressive Web Apps (PWAs) to deliver a best-in-class mobile experience.

If you don’t have time to watch, here’s a quick recap of the four aspects to focus on while building a great mobile web experience:

Expressiveness has always been a strength of the web, but sometimes that expressiveness can come at the cost of loading time or smooth scrolling. For example, event listeners allow developers to create custom scrolling effects for their website, but they can introduce jank when Chrome needs to wait for any touch handler to finish before scrolling a page. With the new passive event listener API , we've given control back to the developer, who can indicate whether they plan to handle the scroll or if Chrome can begin scrolling immediately.

Speed also goes beyond user experience gains. Studies have shown that 40% of users will leave a retail site if it takes longer than 3 seconds to load. To get a blazing fast web page in front of users immediately, we've introduced Accelerated Mobile Pages (AMP) . With AMP, we have seen pages load 4x faster and use up to 10x less data. AMP is already seeing great adoption by developers, with more than 640,000 domains serving AMP pages.

Progressive Web Apps (PWAs) let developers take advantage of new technologies to provide users with an engaging experience from the very first moment. Thanks to a new API called service worker, all the important parts of a web app can be cached so that it loads instantly the next time a user opens it. This caching also allows developers to continue to provide a fast and meaningful experience even when the user is offline or on an unreliable network. PWAs provide elements of polish too: an icon users can add to their home screen, a splash screen when they open it, and a full-screen experience with no address bar.

image 9.gif

JalanTikus Progressive Web App

Logging in is a ubiquitous pattern on the web, but 92% of users abandon a task if they've forgotten their password. To alleviate this pain, Chrome's password manager enables more than 8-billion sign-ins per month, and we're expanding support with the Credential Management API . Using this API allows web apps to more closely integrate with the password manager and streamline the sign-in process.

Even once logged in, checkout can be a complicated process to complete. That's why we're also investing in capabilities such as the Web Payment API and enhanced autofill, assisting users by accurately filling in forms for them. We've found that forms are completed 25% more when autofill is available, increasing odds for conversion.

Once the first interaction with a user is complete, re-engaging on the web can be tricky. Push notifications address this challenge on native apps, and now the push API is available on the web as well. This allows developers to reconnect with their users even if the browser isn't running. Over 10 billion push notifications are sent every day in Chrome, and it’s growing quickly. Jumia found that users who enabled push notifications opened those notifications 38% of the time and recovered carts 9x more often than other users.

Jumia Mobile Web Push Notifications

Success Stories
As developers begin embracing these new technologies, we're seeing success stories from around the world. AliExpress , one of the world's largest e-commerce sites, built a PWA and saw conversion rates for new users increase by 104%. They've also found that u sers love the experience, spending 74% more time on their site per session.

Another great example is BaBe , an Indonesian news aggregator service that was app-only until they developed a PWA with feature parity to their native app. Since launching they have found it to perform even faster than their native app, and have seen comparable time spent per session: 3 minutes on average on both their mobile website and their native app.

Even developers who have only begun implementing certain PWA technologies have seen success. United eXtra , a leading retailer in Saudi Arabia, implemented push notifications and saw users who opted-in returned 4x more often. These returning users also spent 100% more than users returning from other channels.

These are just a handful of businesses that have begun reaping the benefits of investing in Progressive Web Apps. Learn more about our how partners are using PWA technologies to enhance their mobile web experience.

Screen Shot 2016-05-17 at 6.06.16 PM.png

Subscribe to our YouTube channel to stay up to date with all the mobile web sessions from Google I/O, which we will continue to upload as they’re ready. Thanks for coming, thanks for watching, and most of all, thank you for developing for the web!

May 12 2016


Saving data with Google’s PageSpeed Modules

The web is a rich and diverse ecosystem, but sometimes that diversity comes at a price. Authoring a website that works quickly and correctly for all browsers, devices, and connections can be a time-consuming task. Google’s PageSpeed Modules , launched in 2010, enable web servers to automatically speed up sites as content is served. Two new features are available in the latest stable release of PageSpeed to accommodate the diversity of screen sizes and data connections.

Screen resolutions are a common difference among devices. Users with high-resolution screens on fast connections will love crisp, detailed images. Sending those same images to users with small screens on  slow connections will unnecessarily delay the page load and waste their potentially expensive bandwidth. The HTML srcset attribute attribute allows developers to specify alternative versions of an image for the browser to use depending on screen size, but they must manually add this to every image on the page, and also encode the images in several sizes. Fortunately, the latest release of PageSpeed Modules can automate this process.  For example, imagine a page containing the following image element:

<img width="500" height="500" src="Beach.jpg">

When PageSpeed's responsive_images filter encounters this, it will automatically create resized versions of the images, then rewrite the element as :

<img width="500" height="500" src="500x500xBeach.jpg..."
   srcset="750x750xBeach.jpg... 1.5x,
           1000x1000xBeach.jpg... 2x,
           1500x1500xBeach.jpg... 3x,
           xBeach.jpg... 3.4x">

PageSpeed inserts 1.5x, 2x and 3x variants which provides coverage for the most common devices. It also includes the original full-size image and calculates its effective multiple 3.4x, in the above example. The original will be used by high-density displays or when zoomed in.

For users that want to save as much data as possible, PageSpeed Modules can take this one step further. Chromium-based browsers send the “Save-Data” header when the user has indicated a desire to conserve bandwidth. Supporting this typically requires site developers to re-encode low bandwidth versions of all images and serve these just to the clients that send this header. The latest release of PageSpeed understands the Save-Data header and will automatically compress images more aggressively for these data-sensitive users.

Mock storefront without PageSpeed (left), and with PageSpeed and the Save-Data header (right).
Even though there are no apparent visual differences, without PageSpeed the page is 350KB and takes over a minute to load on our simulated 2G connection. With PageSpeed and the Save-Data header the page is 120KB and loads in less than 30 seconds.

These new features, along with many others to make sites smaller and load faster, are available in the latest release of PageSpeed Modules. Developers interested in trying it out can download the modules from the Google Developers site.

Posted by Steve Hill, PageSpeed Engineer and Reducer of Bytes

May 03 2016


New APIs to help developers improve scroll performance

Speed has been a top priority since Chrome's first release, and it's only gotten more important as developers continue to push the boundaries of interactive web experiences. While there are many performance optimizations Chrome can make without involving the developer, sometimes it's impossible for Chrome to execute as quickly as possible without more information. In Chrome 51 we've introduced support for passive event listeners and Intersection Observer , two emerging web standards that help developers create engaging, efficient experiences.

Touch event listeners are often used on the web for custom scrolling experiences and user engagement analytics. They allow developers to register JavaScript to run when the user touches the screen, and give web apps the opportunity to cancel scrolling altogether. Without knowing in advance if the web app will cancel scrolling, Chrome needs to wait for this JavaScript to finish before scrolling the page itself. Over 80% of touch listeners don't cancel the scroll and unnecessarily delay scrolling by up to several seconds. This results in a large amount of jank where the page doesn't seem anchored to the user's finger.

Chrome 51 allows developers to proactively declare that an event listener won't prevent a scroll. While developers should continue to avoid long-running script to reduce all forms of jank , this change eliminates the need to delay scrolling until the JavaScript completes. To learn more about passive event listeners and how to use them, check out the in-depth EventListenerOptions explainer .

Touch scrolling on cnn.com unmodified (left) and with a planned site update to make touch listeners passive (right).

Another way web platform improvements can help developers reduce delays is take common operations that can't be implemented efficiently in JavaScript and instead build them natively into the browser. One prevalent example is heavy Javascript used to calculate whether an element is visible in the document's viewport or other scrolling container. This is useful for knowing whether a certain element was seen or when to dynamically load more content at the bottom of a page, but can cause annoying jank and unnecessary battery drain if run frequently on user interactions.

Chrome 51 includes support for Intersection Observer, a new API to provide viewability information in a more efficient way. Sites can receive a callback whenever any element intersects a watched element or its children. The site no longer needs to implement this functionality with its own custom JavaScript, and gains the benefits of improved page load and scroll performance. For more information and implementation details, see the Intersection Observer explainer .

Studies have shown that an increase in performance leads to happier, more engaged users. Performance is something for everyone in the web ecosystem to care about--not just browser implementers, but also web authors. As developers of both top-level sites and embedded content make use of these new APIs, the result will be a faster web for everyone.

Posted by Rick Byers and Stefan Zager, Professional Jank Busters

April 29 2016


ES6 & ES7 in the browser

JavaScript is a continually evolving programming language standardized over time by a committee of browser vendors, developers, and community members. In the past two years, this committee has introduced ES6, the largest update in the history of JavaScript, and ES7, the first of more frequent annual releases. Together the two versions add hundreds of new features to help developers write expressive, concise, and fast applications. After a long, collaborative journey of design, specification, and implementation work, the V8 JavaScript team has reached a major milestone in language support. Chrome Canary now runs both ES6 and ES7, which will ship to all users in Chrome 52.

ES6 and ES7 support in Chromium provides JavaScript developers with many sought-after features common in other programming languages, but previously missing from the web. These features include ways to simplify common programming patterns, make code easier to write, and customize low-level JavaScript behavior. Classes , for example, allow developers to easily write object-oriented programs and safely extend built-in JavaScript objects. Arrow functions , default parameters , and array convenience methods make common idioms simpler to program and reduce the need to copy and paste boilerplate code between projects. It can be difficult to reason about JavaScript’s asynchronous execution flow and nested callbacks, so ES6 introduces promises , iterators, and generators to simplify asynchronous code, make control flow more expressive, and make writing bug-free code easier. Powerful features like proxies and well-known symbols also give advanced developers the ability to customize language behavior to better match their application’s needs.

In order for websites to take full advantage of these new JavaScript features, multiple browsers must support the latest specifications. Fortunately, cross-browser support has rapidly improved in the past few months. The latest development versions of all modern browsers now support more than 90% of ES6, with polyfills and transpilation available to add support to older browsers as well. Adoption will continue to expand over the coming months, given that the ability to load JavaScript modules from HTML was recently standardized with the <script type="module"> tag. Chromium has already started implementing this new tag, and module support will be available soon , making it even easier to write and ship websites with ES6 and ES7 code.

For more details on the JavaScript standards process, features still under discussion such as proper tail calls, and a deeper dive into the technical side of spec conformance, visit the V8 blog . Check back soon to hear more about upcoming JavaScript features and continued performance optimizations.

Posted by Seth Thompson, Product Manager and ECMAScript ESsayist

Chrome 51 Beta: Credential Management API and reducing the overhead of offscreen rendering

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

Credential Management API

Many sites allow their users to sign in to receive personalized content. Today that requires remembering and typing credentials, which lowers account security when users reuse passwords across multiple sites. Modern browsers have credential managers that remember and autofill saved passwords, but these managers cannot account for custom login flows or remember federated identity preferences.

The latest version of Chrome now supports the Credential Management API , allowing sites to interact with the browser’s credential manager to improve the login experience for users. The API enables users to sign in with one tap and lets them automatically sign back in when returning to the site.

Screen Shot 2016-04-28 at 13.56.55.png
Signing in with one tap using the Credential Management API

Reducing the overhead of offscreen rendering

Modern websites commonly embed cross-origin content like videos, social widgets, and ads. Embedding these resources allows sites to offer compelling content experiences, but it also creates a lot of overhead that can jank the page in ways the embedding site can’t control. The latest version of Chrome no longer runs the rendering pipeline or requestAnimationFrame() callbacks for cross-origin frames that are offscreen. This eliminates unnecessary work and reduces power consumption by up to 30% on several popular mobile sites without affecting the user experience.

Additional features in this release

    Other changes

    • The ability to customize the message shown in the onbeforeunload dialog has been removed to protect users from malicious websites and align with other browsers.
    • Chrome on Android now uses the same media pipeline as desktop Chrome, improving   WebAudio support and allowing sites to interact with the playback rate on <audio> and <video> tags .
    • The latest version of Chrome improves web animations interoperability by supporting lists of values and removing dashed-names in keyframes.
    • Chrome now requires a border style to paint border images, improving spec compliance and interoperability.
    • Percentages can now be used for the sizes of flex item children.
    • DHE-based ciphers have been deprecated and will be removed in Chrome 52 in favor of ECDHE ciphers to improve TLS security.

    Posted by Sabine Borsay and Mike West, Authenticator's Apprentices

    April 20 2016

    Inbox by Gmail: a better way to keep track of events, newsletters and links

    April 15 2016


    Ensuring transparency and choice in the Chrome Web Store

    Updated 7/12/2016: High submission volume has led to review latency that is longer than normal, so we've extended the grace period. The new policy will be enforced beginning  September 6th, 2016
    Today we’re updating the User Data Policy for the Chrome Web Store. Principles of transparency and choice over how users’ personal data is handled have long been key parts of Google’s philosophy. Since early on, Chrome has included privacy-protecting features to give users control over their browsing experience, including incognito mode and granular privacy preferences. Now, we’re consolidating and expanding our policies about user data to ensure our Chrome Web Store developers follow similar principles.

    Chrome provides robust APIs that empower developers to create compelling extensions and apps, and users often need to provide access to their data to allow these services to run. The new User Data Policy extends existing policies to ensure transparent use of the data in a way that is consistent with the wishes and expectations of users. Some of the new requirements for developers are:

    • Be transparent about the handling of user data and disclose privacy practices
    • Post a privacy policy and use encryption, when handling personal or sensitive information, and
    • Ask users to consent to the collection of personal or sensitive data via a prominent disclosure, when the use of the data isn’t related to a prominent feature.

    The policy also has other requirements, including prohibiting the collection of web browsing activity when it’s not required for an item’s main functionality. The full text of the policy is available in our Developer Program Policies and more information is available in the FAQ section.

    We'll notify developers when we discover items that violate the User Data Policy, and they'll have until July 14, 2016 to make any changes needed for compliance. Starting July 15th, 2016, items that violate the policy will be removed from the Web Store and will need to become compliant to be reinstated.

    Protecting our users is our key priority, and we believe this change will make sure users are better informed and allow them to choose how their user data is handled.

    Posted by Teresita Perez and Athas Nikolakakos, Chrome Policy Team

    March 31 2016

    Introducing Gmail Mic Drop
    Express yo'self with emoji in Smart Reply

    March 15 2016

    Smart Reply comes to Inbox by Gmail on the web

    February 26 2016

    Inbox by Gmail: Saving time with Snooze

    February 24 2016

    Productivity at your fingertips with rich text formatting and instant RSVPs

    February 17 2016

    Gmailify: The best of Gmail, without an @Gmail address

    February 09 2016

    Making email safer for you

    January 26 2016

    Inbox by Gmail: find answers even faster

    December 17 2015

    ICYMI: A few stocking stuffers from around Google

    November 03 2015

    Computer, respond to this email: Introducing Smart Reply in Inbox by Gmail
    Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
    Could not load more posts
    Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
    Just a second, loading more posts...
    You've reached the end.

    Don't be the product, buy the product!