OLD | NEW |
| 1 <meta name="doc-family" content="apps"> |
1 <h1 class="page_title">What Are Packaged Apps?</h1> | 2 <h1 class="page_title">What Are Packaged Apps?</h1> |
| 3 <div id="pageData-showTOC" class="pageData">true</div> |
2 <p> | 4 <p> |
3 Packaged apps deliver an experience as capable as a native app, | 5 Packaged apps deliver an experience as capable as a native app, |
4 but as safe as a web page. | 6 but as safe as a web page. |
5 Just like web apps, | 7 Just like web apps, |
6 packaged apps are written in HTML5, JavaScript, and CSS. | 8 packaged apps are written in HTML5, JavaScript, and CSS. |
7 But packaged apps look and behave like native apps, | 9 But packaged apps look and behave like native apps, |
8 and they have native-like capabilities | 10 and they have native-like capabilities |
9 that are much more powerful than those available to web apps. | 11 that are much more powerful than those available to web apps. |
10 </p> | 12 </p> |
11 | |
12 <p> | 13 <p> |
13 <iframe title="YouTube video player" width="610" height="380" src="http://www.yo
utube.com/embed/lBUGTVIJVfM" frameborder="0" allowfullscreen></iframe> | 14 <iframe title="YouTube video player" width="610" height="380" src="http://www.yo
utube.com/embed/lBUGTVIJVfM" frameborder="0" allowfullscreen></iframe> |
14 </p> | 15 </p> |
15 | |
16 <p> | 16 <p> |
17 With access to Chrome APIs and services | 17 Packaged apps have have access to Chrome APIs and services not available to |
18 not available to traditional web apps, | 18 traditional web sites. You can build powerful apps that interact with network |
19 you can build powerful apps that interact | 19 and hardware devices, media tools, and much more. Here's a short list of |
20 with network and hardware devices, | 20 examples: |
21 as well as, media apps. | |
22 Here's a short list of examples: | |
23 </p> | 21 </p> |
24 | |
25 <ul> | 22 <ul> |
26 <li>Shells (VMWare, Citrix, SSH, RDP or VNC clients)</li> | 23 <li>Shells (VMWare, Citrix, SSH, RDP or VNC clients)</li> |
27 <li>Music/video streaming</li> | 24 <li>Music/video streaming</li> |
28 <li>Photo/video/music editing</li> | 25 <li>Photo/video/music editing</li> |
29 </ul> | 26 </ul> |
30 | 27 <p> |
| 28 Watch the <a href="http://www.youtube.com/watch?v=j8oFAr1YR-0">Chrome Apps |
| 29 Google I/O presentation</a> for an in-depth introduction. |
| 30 </p> |
31 <h2 id="look">How they look</h2> | 31 <h2 id="look">How they look</h2> |
32 | |
33 <p> | 32 <p> |
34 When a user opens a packaged app, | 33 When a user opens a packaged app, |
35 their focus is specifically on the tasks | 34 their focus is specifically on the tasks |
36 relating to the app. | 35 relating to the app. |
37 Packaged apps have no traditional chrome: | 36 Packaged apps have no traditional chrome: |
38 the omnibox (address bar), tab strip, | 37 the omnibox (address bar), tab strip, |
39 and other browser interface elements no longer appear. | 38 and other browser interface elements no longer appear. |
40 Like native apps, they don't live within the browser. | 39 Like native apps, they don't live within the browser. |
41 When launched, packaged apps can open in windows | 40 When launched, packaged apps can open in windows |
42 that look like this (and you can style | 41 that look like this (and you can style |
43 your windows in all different ways): | 42 your windows in all different ways): |
44 </p> | 43 </p> |
45 <br> | 44 <br> |
46 | |
47 <img src="{{static}}/images/editor.png" | 45 <img src="{{static}}/images/editor.png" |
48 width="770" | 46 width="770" |
49 height="586" | 47 height="586" |
50 alt="Text editor packaged app in a standalone window"> | 48 alt="Text editor packaged app in a standalone window"> |
51 | |
52 <h2 id="behave">How they behave</h2> | 49 <h2 id="behave">How they behave</h2> |
53 | |
54 <p> | 50 <p> |
55 Packaged app pages always load locally. | 51 Packaged app pages always load locally. |
56 This allows apps to be less dependent on the network. | 52 This allows apps to be less dependent on the network. |
57 Once a user installs an app, they have full control over the app's lifecycle. | 53 Once a user installs an app, they have full control over the app's lifecycle. |
58 Apps open and close quickly, | 54 Apps open and close quickly, |
59 and the system can shut apps down at any time to improve performance. | 55 and the system can shut apps down at any time to improve performance. |
60 Users can fully uninstall apps. | 56 Users can fully uninstall apps. |
61 </p> | 57 </p> |
62 | |
63 <p> | 58 <p> |
64 Without any effort on your part, your apps will launch offline. | 59 Without any effort on your part, your apps will launch offline. |
65 But you will need to put some effort into making sure user data is stored locall
y while offline | 60 But you will need to put some effort into making sure user data is stored locall
y while offline |
66 and then synced back up to your data server once online | 61 and then synced back up to your data server once online |
67 (see <a href="offline_apps.html">Offline First</a>). | 62 (see <a href="offline_apps.html">Offline First</a>). |
68 </p> | 63 </p> |
69 | |
70 <h2 id="develop">How to develop them</h2> | 64 <h2 id="develop">How to develop them</h2> |
71 | |
72 <p> | 65 <p> |
73 Packaged apps are modified web apps. | 66 Packaged apps are modified web apps. |
74 You use the same code, frameworks, and tools of the web platform to write your a
pps. | 67 You use the same code, frameworks, and tools of the web platform to write your a
pps. |
75 Some browser features have been removed, other web APIs have been disabled | 68 Some browser features have been removed, other web APIs have been disabled |
76 or changed to improve security and programming practices. | 69 or changed to improve security and programming practices. |
77 </p> | 70 </p> |
78 | |
79 <p> | 71 <p> |
80 New features have been added to help you build more native-like apps. | 72 New features have been added to help you build more native-like apps. |
81 The app container and programming models control how packaged apps look and beha
ve. | 73 The app container and programming models control how packaged apps look and beha
ve. |
82 These models aim to provide users with a more native experience. | 74 These models aim to provide users with a more native experience. |
83 Powerful APIs have been added so your apps can have native-like capabilities, | 75 Powerful APIs have been added so your apps can have native-like capabilities, |
84 and a serious security model is enforced to make sure these APIs are not abused.
</p> | 76 and a serious security model is enforced to make sure these APIs are not abused.
</p> |
85 | |
86 <p> | 77 <p> |
87 To learn more about how to develop packaged apps: | 78 To learn more about how to develop packaged apps: |
88 </p> | 79 </p> |
89 | |
90 <ul> | 80 <ul> |
91 <li> | 81 <li> |
92 <a href="app_architecture.html">Understanding the Architecture</
a> | 82 <a href="app_architecture.html">Understanding the Architecture</
a> |
93 introduces the app container, programming, and security models. | 83 introduces the app container, programming, and security models. |
94 </li> | 84 </li> |
95 <li> | 85 <li> |
96 <a href="app_lifecycle.html">The Fundamentals</a> | 86 <a href="app_lifecycle.html">The Fundamentals</a> |
97 shows how to use this architecture and how to build | 87 shows how to use this architecture and how to build |
98 for offline, manage data, and embed external content. | 88 for offline, manage data, and embed external content. |
99 </li> | 89 </li> |
100 <li> | 90 <li> |
101 <a href="app_network.html">Advanced Technologies</a> | 91 <a href="app_network.html">Advanced Technologies</a> |
102 shows how to use the powerful network and hardware APIs, | 92 shows how to use the powerful network and hardware APIs, |
103 and how to connect your app to other apps using web intents. | 93 and how to connect your app to other apps using web intents. |
104 </li> | 94 </li> |
105 <li> | 95 <li> |
106 <a href="app_deprecated.html">Disabled Features</a> | 96 <a href="app_deprecated.html">Disabled Features</a> |
107 describes the web features that have been disabled | 97 describes the web features that have been disabled |
108 and what to use in their place, where relevant. | 98 and what to use in their place, where relevant. |
109 </li> | 99 </li> |
110 </ul> | 100 </ul> |
111 | 101 <p class="backtotop"><a href="#top">Back to top</a></p> |
112 <p class="backtotop"><a href="#top">Back to top</a></p> | |
OLD | NEW |