src/chrome/common/extensions/docs/templates/articles/about_apps.html

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