Google Chrome Frame: HTML5, Sooner

Alex Russell <slightlyoff@google.com>
June 29th, 2010

Agenda

  1. What is Google Chrome Frame (GCF)?
  2. How will HTML5 change the way I work?
  3. Who can use it?
  4. How does GCF work?

In A Nutshell

Google Chrome Frame lets you build sites with HTML5 – today – while still supporting Internet Explorer.

Said Another Way

Google Chrome Frame is an Open Source plugin for Internet Explorer that lets developers and users choose to display pages seamlessly in Google Chrome's renderer. Existing sites work as they always have.

Demos

This Presentation!

CSS3, HTML5

YouTube

HTML5 <video>

Acid 3

SVG, HTML5, CSS3, etc.

Getting Over IE6

What If We Could Use...

Modern HTML

  • <canvas>
  • <audio>
  • <video> & WebM
  • <input type="range">
  • <input autofocus>
  • <input placeholder="...">
  • New semantics: header, section, etc.
  • Microdata
  • ARIA role and state attributes
  • SVG
  • data: URIs

Modern CSS

  • CSS 3 selectors
  • Gradients & Reflections
  • Rounded corners
  • Box & Text shadows
  • Transitions & Animations
  • GPU acceleration
  • @font-face & WOFF
  • Pointer events
  • Box layout
  • Text clipping
  • Multi-background
  • background-[size|origin|clip]
  • HSLA color model

Modern JS & DOM

  • addEventListener
  • querySelectorAll
  • HTMLDivElement, etc.
  • Array generics, ES5 features
  • JITing JS engines
  • Web Workers
  • Local Storage
  • Web Sockets
  • AppCache
  • Notifications
  • Drag and Drop
  • Geolocation
  • WebGL

“Why not just install Chrome?”

No Surprises, Please

GCF only renders pages when:

  • Users have GCF installed
  • Developers opt in per page
  • No “blanket” rendering
  • GCF won't break the intranet

Opt In How?

HTTP header: 
X-UA-Compatible: chrome=1
Or meta tag: 
<meta http-equiv="X-UA-Compatible" content="chrome=1">

Header Method

Pros:

  • More reliable detection
  • Easier to configure for whole sites

Cons:

  • Doesn't work with pure HTML
  • You may not be able to change headers

Meta Tag Method

Pros:

  • Simplest to prototype with

Cons:

  • Harder to configure for whole sites
  • Slower, less reliable detection (first 1k)
  • Network-level hiccups

What If It's Not Installed?

  • Graceful fallback by design
    1. MSHTML for IE
    2. Other browsers render page as usual
  • CFInstall.js for prompt/install
    • No restart required
    • Offer GCF along with other browsers

CFInstall.js Demo

Server-Side Detection

User-Agent extension 
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/4.0;
    ...) chromeframe/5.0.375.15
  • User-Agent extended when active
  • navigator.userAgent reports Google Chrome

Things Work The Way You Expect

  • Uses IE's network stack
    • Same cache behavior
    • Same cookies
    • Same SSL Behavior
  • Respects In-Private mode
  • Respects cache-clearing

How It Works

  1. Navigation begins
  2. Request is issued by IE
    1. UA string augmented with chromeframe/5.0.xxx.yy
  3. Response content observed
    1. If page opts in, switch
    2. Else, pass content through

How It Works (contd.)

How It Works (contd.)

Architecture Benefits

  • BHO is tiny, loads with IE
  • chrome.exe starts up on demand
  • Narrow, defined communication channels
  • Page crashes isolated via multi-process
  • Sandboxing protects browser processes

OS & Version Support

  • Internet Explorer 6, 7, and 8
  • Windows XP SP2, Vista, and 7
  • No Windows 2000 or XP SP1 support
  • Install requires Administrator permissions
  • MSI & group policy templates soon
  • ~500K bootstrap download, ~16MB installer

Advanced Topics: Embedding

  • ActiveX & ActiveDocument 
    new ActiveXObject('ChromeTab.ChromeFrame')
  • Implements IChromeFrame
  • See chrome_tab.idl for details

Performance Notes

How GCF helps

  • DNS pre-fetch
  • Parallel script fetching
  • V8 & WebKit
  • Modern CSS

How GCF can hurt

  • Startup time
  • Cold vs. Warm

Current Status, Next Steps

  • In Beta
  • Beta refresh soon
  • Improving startup performance
  • “It just works” features

We want your feedback and need your help

How You Can Get Involved

http://google.com/chromeframe

http://code.google.com/chrome/chromeframe

Questions?

Thank You

http://google.com/chromeframe

http://code.google.com/chrome/chromeframe