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