| <meta name="doc-family" content="apps"> |
| <h1>What Are Chrome Apps?</h1> |
| |
| <p> |
| Chrome Apps deliver an experience as capable as a native app, |
| but as safe as a web page. |
| Just like web apps, |
| Chrome Apps are written in HTML5, JavaScript, and CSS. |
| But Chrome Apps look and behave like native apps, |
| and they have native-like capabilities |
| that are much more powerful than those available to web apps. |
| </p> |
| |
| <p> |
| <iframe title="YouTube video player" width="610" height="380" src="//www.youtube.com/embed/lBUGTVIJVfM" frameborder="0" allowfullscreen></iframe> |
| </p> |
| |
| <p> |
| Chrome Apps have access to Chrome APIs and services not available to |
| traditional web sites. You can build powerful apps that interact with network |
| and hardware devices, media tools, and much more. Here's a short list of |
| examples: |
| </p> |
| |
| <ul> |
| <li>Shells (VMWare, Citrix, SSH, RDP or VNC clients)</li> |
| <li>Music/video streaming</li> |
| <li>Photo/video/music editing</li> |
| </ul> |
| |
| <p> |
| Watch the Chrome Apps<strong> |
| <a href="http://www.youtube.com/watch?v=j8oFAr1YR-0">2012</a> |
| and |
| <a href="http://www.youtube.com/watch?v=f2tJRXDTMuY">2013</a> |
| Google I/O presentations</strong> for an in-depth introduction. |
| </p> |
| |
| <h2 id="look">How they look</h2> |
| |
| <p> |
| When a user opens a Chrome App, |
| their focus is specifically on the tasks |
| relating to the app. |
| Chrome Apps have no traditional chrome: |
| the omnibox (address bar), tab strip, |
| and other browser interface elements no longer appear. |
| Like native apps, they don’t live within the browser. |
| When launched, Chrome Apps can open in windows |
| that look like this (and you can style |
| your windows in all different ways): |
| </p> |
| <br> |
| |
| <img src="{{static}}/images/editor.png" |
| width="770" |
| height="586" |
| alt="Text editor Chrome App in a standalone window"> |
| |
| <h2 id="behave">How they behave</h2> |
| |
| <p> |
| Chrome App pages always load locally. |
| This allows apps to be less dependent on the network. |
| Once a user installs an app, they have full control over the app's lifecycle. |
| Apps open and close quickly, |
| and the system can shut apps down at any time to improve performance. |
| Users can fully uninstall apps. |
| </p> |
| |
| <p> |
| Without any effort on your part, your apps will launch offline. |
| But you will need to put some effort into making sure user data is stored locally while offline |
| and then synced back up to your data server once online |
| (see <a href="offline_apps.html">Offline First</a>). |
| </p> |
| |
| <h2 id="develop">How to develop them</h2> |
| |
| <p> |
| Chrome Apps are modified web apps. |
| You use the same code, frameworks, and tools of the web platform to write your apps. |
| Some browser features have been removed, other web APIs have been disabled |
| or changed to improve security and programming practices. |
| </p> |
| |
| <p> |
| New features have been added to help you build more native-like apps. |
| The app container and programming models control how Chrome Apps look and behave. |
| These models aim to provide users with a more native experience. |
| Powerful APIs have been added so your apps can have native-like capabilities, |
| and a serious security model is enforced to make sure these APIs are not abused.</p> |
| |
| <p> |
| To learn more about how to develop Chrome Apps: |
| </p> |
| |
| <ul> |
| <li> |
| <a href="app_architecture.html">Understanding the Architecture</a> |
| introduces the app container, programming, and security models. |
| </li> |
| <li> |
| <a href="app_lifecycle.html">The Fundamentals</a> |
| shows how to use this architecture and how to build |
| for offline, manage data, and embed external content. |
| </li> |
| <li> |
| <a href="app_network.html">Advanced Technologies</a> |
| shows how to use the powerful network and hardware APIs. |
| </li> |
| <li> |
| <a href="app_deprecated.html">Disabled Features</a> |
| describes the web features that have been disabled |
| and what to use in their place, where relevant. |
| </li> |
| </ul> |
| |
| <p class="backtotop"><a href="#top">Back to top</a></p> |