Skip to main content

What’s New in Chrome 39

By Craig Buckler

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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!

Learn PHP for free!

Make the leap into server-side programming with a comprehensive cover of PHP & MySQL.

Normally RRP $11.95 Yours absolutely free

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.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.