chrome/common/extensions/docs/templates/articles/app_architecture.html

   1 <meta name="doc-family" content="apps">
   2 <h1>Chrome Apps Architecture</h1>
   3
   4
   5 <p>
   6 Chrome Apps integrate closely with a user’s operating system.
   7 They are designed to be run outside of a browser tab,
   8 to run robustly in offline and poor connectivity scenarios and
   9 to have far more powerful capabilities than are available
  10 in a typical web browsing environment.
  11 The app container, programming, and security models
  12 support these Chrome App requirements.
  13 </p>
  14
  15 <h2 id="container">App container model</h2>
  16
  17 <p>
  18 The app container describes the visual appearance
  19 and loading behavior of Chrome Apps.
  20 Chrome Apps look different than traditional web apps
  21 because the app container does not show any traditional web page UI controls;
  22 it simply contains a blank rectangular area.
  23 This allows an app to blend with “native” apps on the system,
  24 and it prevents the user from “messing” with the app logic
  25 by manually changing the URL.
  26 </p>
  27
  28 <p>
  29 Chrome Apps are loaded differently than web apps.
  30 Both load the same type of content:
  31 HTML documents with CSS and JavaScript;
  32 however, a Chrome App is loaded in the app container,
  33 not in the browser tab.
  34 Also, the app container must load the main document
  35 of the Chrome App from a local source.
  36 This forces all Chrome Apps to be at least minimally functional
  37 when offline and it provides a place
  38 to enforce stricter security measures.
  39 </p>
  40
  41 <img src="{{static}}/images/container.png"
  42      width="671"
  43      height="172"
  44      alt="how app container model works">
  45
  46
  47 <h2 id="programming">Programming model</h2>
  48
  49 <p>
  50 The programming model describes the lifecycle
  51 and window behavior of Chrome Apps.
  52 Similar to native apps,
  53 the goal of this programming model is to give users
  54 and their systems full control over the app lifecycle.
  55 The Chrome App lifecycle should be independent
  56 of browser window behavior or a network connection.
  57 </p>
  58
  59 <p>
  60 The “event page” manages the Chrome App lifecycle
  61 by responding to user gestures and system events.
  62 This page is invisible, only exists in the background,
  63 and can be closed automatically by the system runtime.
  64 It controls how windows open and close and
  65 when the app is started or terminated.
  66 There can only be one “event page” for a Chrome App.
  67 <p>
  68
  69 <div class="video-container">
  70   <iframe title="YouTube video player" width="610" height="380" src="//www.youtube.com/embed/yr1jgREbH8U" frameborder="0" allowfullscreen></iframe>
  71 </div>
  72
  73 <h3 id="lifecycle">App lifecycle at a glance</h3>
  74
  75 <p>
  76 For detailed instructions on how to use the programming model,
  77 see <a href="app_lifecycle">Manage App Lifecycle</a>.
  78 Here's a brief summary of the Chrome App lifecyle
  79 to get you started:
  80 </p>
  81
  82 <br>
  83
  84 <table class="simple">
  85   <tr>
  86     <th scope="col"> Stage </th>
  87     <th scope="col"> Summary </th>
  88   </tr>
  89   <tr>
  90     <td>Installation</td>
  91     <td>User chooses to install the app and explicitly accepts the
  92         <a href="declare_permissions">permissions</a>.
  93     </td>
  94   </tr>
  95   <tr>
  96     <td>Startup</td>
  97     <td>The event page is loaded,
  98       the 'launch' event fires,
  99       and app pages open in windows.
 100       You
 101       <a href="app_lifecycle#eventpage">create the windows</a>
 102       that your app requires,
 103       how they look, and how they communicate
 104       with the event page and with other windows.
 105     </td>
 106   </tr>
 107   <tr>
 108     <td>Termination</td>
 109     <td>User can terminate apps at any time
 110       and app can be quickly restored to previous state.
 111       <a href="app_lifecycle#local_settings">Stashing data</a>
 112         protects against data loss.</td>
 113   </tr>
 114   <tr>
 115     <td>Update</td>
 116     <td>Apps can be updated at any time;
 117       however, the code that a Chrome App is running
 118       cannot change during a startup/termination cycle.</td>
 119   </tr>
 120   <tr>
 121     <td>Uninstallation</td>
 122     <td>User can actively uninstall apps.
 123         When uninstalled, no executing code or
 124         private data is left behind.</td>
 125   </tr>
 126 </table>
 127
 128 <h2 id="security">Security model</h2>
 129
 130 <p>
 131 The Chrome Apps security model protects users
 132 by ensuring their information is managed
 133 in a safe and secure manner.
 134 <a href="contentSecurityPolicy">Comply with CSP</a>
 135 includes detailed information on how to comply with content security policy.
 136 This policy blocks dangerous scripting
 137 reducing cross-site scripting bugs
 138 and protecting users against man-in-the-middle attacks.
 139 </p>
 140
 141 <p>
 142 Loading the Chrome App main page locally provides a place
 143 to enforce stricter security than the web.
 144 Like Chrome extensions,
 145 users must explicitly agree to trust the Chrome App on install;
 146 they grant the app permission to access and use their data.
 147 Each API that your app uses will have its own permission.
 148 The Chrome Apps security model also provides the ability
 149 to set up privilege separation on a per window basis.
 150 This allows you to minimize the code in your app
 151 that has access to dangerous APIs,
 152 while still getting to use them.
 153 </p>
 154
 155 <p>
 156 Chrome Apps reuse Chrome extension process isolation,
 157 and take this a step further by isolating storage and external content.
 158 Each app has its own private storage area
 159 and can’t access the storage of another app
 160 or personal data (such as cookies) for websites that you use in your browser.
 161 All external processes are isolated from the app.
 162 Since iframes run in the same process as the surrounding page,
 163 they can only be used to load other app pages.
 164 You can use the <code>object</code> tag to
 165 <a href="app_external">embed external content</a>;
 166 this content runs in a separate process from the app.
 167 </p>
 168
 169 <div class="video-container">
 170   <iframe title="YouTube video player" width="610" height="380" src="//www.youtube.com/embed/EDtiWN42lHs" frameborder="0" allowfullscreen></iframe>
 171 </div>