Web
Article

What’s New in Chrome 39

By Craig Buckler

Despite being six years old, Chrome is rapidly approaching middle age in version numbers. Chrome 39 has been released and you probably have it installed. There are several good new features … plus one or two slightly suspect additions.

ECMAScript 6 Generators

Generators are special functions declared with function* which create iterators. An iterator is an object with a next() method which is called to return a value. The generator function uses a yield statement to provide the next value in the sequence.

Arunoda Susiripala provides a basic example in JavaScript Generators and Preventing Callback Hell:

function* HelloGen() {
    yield 100;
    yield 400;
}

var gen = HelloGen();

console.log(gen.next()); // {value: 100, done: false}
console.log(gen.next()); // {value: 400, done: false}
console.log(gen.next()); // {value: undefined, done: true}

ECMAScript 6 Generators are supported in Chrome, Opera and Firefox 31+.

The Beacon API

The new Beacon API lets you send data to a server without having to wait for a response. Requests are queued and sent by the browser as soon as possible but — importantly — it doesn’t delay unloading of the current page or loading of the next.

navigator.sendBeacon() is passed a URL and data — perhaps a string or FormData value. Typically, it could be used when transmitting statistical information, e.g.

navigator.sendBeacon('/log', 'page-unloaded');

The method returns true if the browser successfully queues the beacon request. I’m not sure what you could do if false was returned but beacons should not be used for essential functionality or messaging.

The Beacon API is supported in Chrome, Opera and Firefox 31+.

Web Animation Controls

Web Animations were introduced in Chrome 36. The idea is to permit simple CSS3-like keyframe and animation declarations from JavaScript, e.g.

var myanimation = myelement.animate([
    { color: "#f00" },
    { left: "20em" },
    { transform: "rotate(180deg)" }
], {
    duration: 1000,
    iterations: 1,
    delay: 0
});

The advantage is you can then control and synchronize playback according to user input or other conditions. Chrome 39 adds playback methods such as play(), pause(), reverse(), finish() (puts the animation into its final state) and cancel() (clears all effects).

Think of Web Animation as a compromise between simple CSS3 animations and complex JavaScript full-frame control using requestAnimationFrame and your own timing functions. It’s possibly overkill for general web page effects but not powerful enough for games. Apps and presentations may be good use cases?

Chrome and Opera are currently the only browsers to support Web Animation. There’s support in Firefox nightlies and a polyfill is available but the technology won’t be stable for some time yet.

Web Application Manifest

Not to be confused with the Application Cache Manifest, the Web Application Manifest is a JSON file where you can place meta data such as the name, start address, icons, display mode, orientation etc.

You’ll require a link in your HTML head:

<link rel="manifest" href="manifest.json">

and the manifest file itself, e.g.

{
    "name": "My Application",
    "icons": [{
        "src": "icon/lowres",
        "sizes": "64x64"
      }, {
        "src": "icon/small",
        "sizes": "64x64"
      }, {
        "src": "icon/hd_hi",
        "sizes": "128x128",
        "density": 2
      }],
    "start_url": "/index.html",
    "display": "fullscreen",
    "orientation": "landscape"
}

This eventually means we can remove the 57 iOS icon size alternatives from the top of every page … presuming Apple decide to implement the technology in Safari!

Cross-browser support is patchy. Firefox uses the manifest for its Marketplace, but there appear to be some differences in property names.

Windows 7 Immersive Mode

Switching to Immersive Mode on Windows 7 makes Chrome act a little like a Windows 8 full-screen Metro application. Bizarrely, it then places a Chrome OS-like semi-transparent taskbar above the Windows taskbar — with it’s own start button and clock.

Why? If Windows 7 users want a Windows 8 experience they can upgrade. However, there’s a reason many Windows 7 choose to stick with that OS: they don’t want Windows 8!

I’m also confused by Google’s insistence on sneaking Chrome OS widgets into other operating systems. A Chrome App icon here and there is fine — but replicating native features is pointless. Perhaps they’re hoping to entice people to Chrome OS but annoying them won’t help.

Miscellaneous Updates

A few more minor features…

  • You can now install free Chrome Apps from the Play Store without being signed in.
  • scrollTop and scrollLeft now return fractions of a pixel on high-DPI/Retina screens. If you thought pixel-perfection was bad, wait until clients start demanding sub-pixel perfection!
  • Saved passwords can now be edited.
  • The 64-bit edition of Chrome is now the only version available on Mac OS.
  • SHA-1 encryption is being phased out in favor of SHA-2.
  • Experimental support for extension buttons icons inside the menu has been added (set Enable extension toolbar redesign in about:flags).

Despite a few dodgy additions and some Firefox catch-ups, version 39 is another great update. Chrome remains fast, stable and the browser of choice for almost half the web. Recommended.

  • WooDzu

    Personally I’m impressed ES6 classes for Chrome are in the works

  • http://cozmotek.com cozmo technology

    Good post! This is a very informative post about Chrome. Thanks for sharing.

  • http://www.mighty-technologies.com/ Sergey Romanov

    Here we are. Chrome 39 release. I was waiting for it :)

  • http://aquafox.uk.to/ ザック

    “I’m also confused by Google’s insistence on sneaking Chrome OS widgets into other operating systems.”

    It’s because they switched to the same widget framework that’s used on Chrome OS for easier portability and allow for better unification, similar to how Qt functions. Of course, this makes Google all to eager in importing Chrome OS onto other operating systems which has it’s ups and downs.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Instant Website Review

Use Woorank to analyze and optimize your website to improve your website to improve your ranking!

Run a review to see how your site can improve across 70+ metrics!

Get the latest in Front-end, once a week, for free.