So what's a web app? introduction to the chrome web store

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

@googledevlatam #devfest10
• University of Michigan, BSE Computer &
Electrical Engineering
• Developer Programs Engineer, Google
• Docs / Sites / Health / Base / OAuth /
Chrome / HTML5
Eric Bidelman (@ebidel)
3

• Chrome & HTML5
• Thinking in Web Apps
• Chrome Web Store
• Anatomy of an app ( hosted vs. packaged )
• Compatibility
• Questions
Agenda
4

5
Chrome & HTML5

Why Chrome?
• 70+ million users
• Stable channel updates very 6 weeks, new Canary ( nightly ) build
• ~400% JavaScript performance improvement
• HTML5 features pushing the web forward
6
0 1,500 3,000 4,500 6,000Initial Beta
Chrome 1
Chrome 2
Chrome 3
Chrome 4
Chrome 5
Chrome 6
Chrome 7
Chrome 8
Chrome 9
V8 Benchmark Score v5

Why HTML5?
7

Text
8

9
Awesome Demo #1
http://www.monocubed.com/?p=728

Why The Web?
1.No install == No Friction
2.Seamless update
3.Cross-platform + device support
10

Text
11

12
Thinking in Web Apps

An App Should Deliver:
13

1.Goal-orientated
13

1.Goal-orientated
2.Beautiful & Immersive!
13

1.Goal-orientated
3.Rich Experience
13

1.Goal-orientated
3.Rich Experience
4.Fast
13

Examples
14
lovelywebapps.blogspot.com

15
Awesome Demo #2 ( FF4 )
http://weare.buildingsky.net/processing/dsp.js/examples/fft.html

16
Chrome Web Store

Text
17

Text
18

Text
19

Text
? ? ? ? ?
19

20
Benefits
• Discoverability
• Ratings / Reviews
• Distribution
• Auto-update (for packaged apps)
• Revenue: $$ for developers!*
• Themes & Extensions too

21
Control
• YOU create the app,
• YOU upload it to the store,
• YOU provide the product information,
• YOU publish.

22
Frictionless
• WE handle payments* OR choose your own
• WE provide a licensing API
• OpenID, OAuth
• WE provide the store Analytics

23
Payment Options*
• Free
• Pay to install
• Subscriptions - monthly / annually
• Trial / Freemium
• Choose your own adventure

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

24
What you can do to prepare

25
Awesome Demo #3 ( FF4 )
http://weare.buildingsky.net/processing/dsp.js/examples/sampler.html

26
Integrated?
Apps are “installed” into the browser!

27
Launcher
• Convenient shortcut on new tab page
• Simpliﬁed permissions dialog
• Launch as:
• Tab
• Panel
• Pinned Tab*
• Full Screen*
* Cannot be set programmatically

28
Hosted Apps

29
Hosted Apps
• ‘Wraps’ an existing web site => URL is displayed
• Typically will require a web server component
• Elevated permissions

29
Hosted Apps
• ‘Wraps’ an existing web site => URL is displayed
• Typically will require a web server component
• Elevated permissions
geolocation
unlimitedStorage
notifications

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
}
};

31
Lets Create A Hosted App

32
1. Make The App
http://localhost/~ericbidelman/webstore/helloworld.html

33
2. Make It Installable (manifest.json)
{
"name": "My First App",
"description": "Hello World Hosted App",
"version": "0.0.1",
"icons": {
"32": "logo32x32.png", "128": "logo128x128.png"
},
"app": {
"launch": {
"web_url": "http://localhost/~ericbidelman/webstore/helloworld.html"
}
}
}

34
{
"version": "0.0.1",
"icons": {
},
"app": {
"launch": {
}
}
}

35
{
"version": "0.0.1",
"icons": {
},
"app": {
"launch": {
},
"container": "panel", // Default is tab and can be omitted.
"width": 1000,
"height": 500
}
}

36
{
"version": "0.0.1",
"icons": {
},
"app": {
"launch": {
},
"permissions": [
"geolocation",
"unlimitedStorage",
"notifications"
],
}
}

37
{
"version": "0.0.1",
"icons": {
},
"app": {
"launch": {
},
"permissions": [
"geolocation",
"unlimitedStorage",
"notifications"
],
"urls": [ // URLs listed below will be granted permissions below.
"*://localhost/"
],
}
}

38
DEMOS

39
Packaged Apps

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

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”]

42
...Much Much More!
• Context Menus
• Window/Tab Manipulation
• Omnibar
• History
• Bookmarks
• Cookies

43
Awesome Demo #4
http://www.monocubed.com/?p=696

44
Is the web ready?

1%2%4%
12%
32%
50%
http://gs.statcounter.com/#browser-ww-monthly-201007-201009
45
Browser Share - September 2010
Internet Explorer Firefox
Google Chrome Safari
Opera Other

46
Google Chrome Frame

Text
http://acid3.acidtests.org/
47

48

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 beneﬁts
• Works in Chrome, it works in GCF!
• New features auto update with
Chrome
• built-in plugins Flash and PDF
viewer
• Open source

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

51
Wrapping it Up

How To Build An App For The Store?
52

52
• HTML5

52
• HTML5
• CSS3

52
• HTML5
• CSS3
• JavaScript

52
• HTML5
• CSS3
• JavaScript
• Flash

52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight

52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight
• Google Native Client (C++)

52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight
• Java Applets

52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight
• Java Applets
• Google App Engine

52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight
• Java Applets
• LAMP

52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight
• Java Applets
• LAMP
• ...

52
• HTML5
• CSS3
• JavaScript
• Flash
• Sliverlight
• Java Applets
• LAMP
• ...
ALL the technologies you love on the web...

53
Remember:
• Browser innovation is accelerating
• HTML5, JS engines, developer tools, hardware acceleration
• Parity with the desktop
• Features are ﬁrst-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!

• Documentation
• code.google.com/chrome/webstore/
• code.google.com/chrome/apps/
• code.google.com/chrome/extensions/
• Stay in Touch!
• Twitter: @ChromiumDev
• groups.google.com/a/chromium.org/group/chromium-
html5/
• groups.google.com/a/chromium.org/group/chromium-
apps/topics
Links
54

55
Thanks!
Q & A

So what's a web app? introduction to the chrome web store

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Similar to So what's a web app? introduction to the chrome web store

Similar to So what's a web app? introduction to the chrome web store (20)

Recently uploaded

Recently uploaded (20)

So what's a web app? introduction to the chrome web store