2. Eric Bidelman - Google
Google DevFest - Buenos Aires, Argentina
Nov 2, 2010
What is a Web App?
Building Apps for the Chrome Web Store
Wednesday, November 3, 2010
3. @googledevlatam #devfest10
• University of Michigan, BSE Computer &
Electrical Engineering
• Developer Programs Engineer, Google
• Docs / Sites / Health / Base / OAuth /
Chrome / HTML5
Eric Bidelman (@ebidel)
3
Wednesday, November 3, 2010
4. @googledevlatam #devfest10
• Chrome & HTML5
• Thinking in Web Apps
• Chrome Web Store
• Anatomy of an app ( hosted vs. packaged )
• Compatibility
• Questions
Agenda
4
Wednesday, November 3, 2010
31. @googledevlatam #devfest10
22
Frictionless
• WE handle payments* OR choose your own
• WE provide a licensing API
• OpenID, OAuth
• WE provide the store Analytics
Wednesday, November 3, 2010
33. @googledevlatam #devfest10
23
Payment Options*
• Free
• Pay to install
• Subscriptions - monthly / annually
• Trial / Freemium
• Choose your own adventure
*For now, need a US bank account to publish
Wednesday, November 3, 2010
40. @googledevlatam #devfest10
29
Hosted Apps
• ‘Wraps’ an existing web site => URL is displayed
• Typically will require a web server component
• Elevated permissions
Wednesday, November 3, 2010
41. @googledevlatam #devfest10
29
Hosted Apps
• ‘Wraps’ an existing web site => URL is displayed
• Typically will require a web server component
• Elevated permissions
Wednesday, November 3, 2010
42. @googledevlatam #devfest10
29
Hosted Apps
• ‘Wraps’ an existing web site => URL is displayed
• Typically will require a web server component
• Elevated permissions
geolocation
unlimitedStorage
notifications
Wednesday, November 3, 2010
43. @googledevlatam #devfest10
30
Hosted Apps: Detecting Installation
window.onload = function(e) {
if (window.chrome.app.isInstalled) {
// Running as an installed app via app launcher
} else {
// Running app via a bookmark/link
}
};
Wednesday, November 3, 2010
53. @googledevlatam #devfest10
40
Packaged Apps
• Normal web site + extra metadata in a .zip => No URL
displayed
• Can only include local_path URLs
• Supports auto-update
• When to Use?
• don’t require a server component
• don’t want to host an app online
• want tighter integration with Chrome
• don’t care about supporting other browsers
Wednesday, November 3, 2010
54. @googledevlatam #devfest10
41
But There’s More
• Access the chrome.extensions.* APIs
• except browser_action & page_action
• Content Scripts: great for integration
• Background Pages: great for polling
• Cross-Domain XHRs
permissions: [“http://api.twitter.com”]
Wednesday, November 3, 2010
64. @googledevlatam #devfest10
49
What Is It?
• Plug-in: brings the power of Chrome to
IE 6,7,8
• V8 JS engine
• CSS/HTML rendering engine
• Security ( sandbox ), performance,
stability benefits
• Works in Chrome, it works in GCF!
• New features auto update with
Chrome
• built-in plugins Flash and PDF
viewer
• Open source
Wednesday, November 3, 2010
65. @googledevlatam #devfest10
1.Add a single meta tag to your site
• if !installed: direct users to download
• else: your site ‘just works’
2.Add a response header
<meta http-equiv="X-UA-Compatible" content="chrome=1">
X-UA-Compatible: chrome=1
Chrome Frame
50
Wednesday, November 3, 2010
72. @googledevlatam #devfest10
How To Build An App For The Store?
52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight
Wednesday, November 3, 2010
73. @googledevlatam #devfest10
How To Build An App For The Store?
52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight
• Google Native Client (C++)
Wednesday, November 3, 2010
74. @googledevlatam #devfest10
How To Build An App For The Store?
52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight
• Google Native Client (C++)
• Java Applets
Wednesday, November 3, 2010
75. @googledevlatam #devfest10
How To Build An App For The Store?
52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight
• Google Native Client (C++)
• Java Applets
• Google App Engine
Wednesday, November 3, 2010
76. @googledevlatam #devfest10
How To Build An App For The Store?
52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight
• Google Native Client (C++)
• Java Applets
• Google App Engine
• LAMP
Wednesday, November 3, 2010
77. @googledevlatam #devfest10
How To Build An App For The Store?
52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight
• Google Native Client (C++)
• Java Applets
• Google App Engine
• LAMP
• ...
Wednesday, November 3, 2010
78. @googledevlatam #devfest10
How To Build An App For The Store?
52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight
• Google Native Client (C++)
• Java Applets
• Google App Engine
• LAMP
• ...
ALL the technologies you love on the web...
Wednesday, November 3, 2010
79. @googledevlatam #devfest10
53
Remember:
• Browser innovation is accelerating
• HTML5, JS engines, developer tools, hardware acceleration
• Parity with the desktop
• Features are first-class citizens
• Don’t wait until 2022 to use HTML5!
• Chrome Web Store
• More outlets / distribution channels to reach users than ever before
• Your HTML5 investment will be rewarded!
Wednesday, November 3, 2010