Index: chrome/common/extensions/docs/server2/templates/articles/app_architecture.html |
diff --git a/chrome/common/extensions/docs/server2/templates/articles/app_architecture.html b/chrome/common/extensions/docs/server2/templates/articles/app_architecture.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..6a6cdc446dd33cfa83265c21464159ae618428e3 |
--- /dev/null |
+++ b/chrome/common/extensions/docs/server2/templates/articles/app_architecture.html |
@@ -0,0 +1,173 @@ |
+<meta name="doc-family" content="apps"> |
+<h1>Understand the Architecture</h1> |
+ |
+ |
+<p> |
+Packaged apps integrate closely with a user’s operating system. |
+They are designed to be run outside of a browser tab, |
+to run robustly in offline and poor connectivity scenarios and |
+to have far more powerful capabilities than are available |
+in a typical web browsing environment. |
+The app container, programming, and security models |
+support these packaged app requirements. |
+</p> |
+ |
+<h2 id="container">App container model</h2> |
+ |
+<p> |
+The app container describes the visual appearance |
+and loading behavior of packaged apps. |
+Packaged apps look different than traditional web apps |
+because the app container does not show any traditional web page UI controls; |
+it simply contains a blank rectangular area. |
+This allows an app to blend with “native” apps on the system, |
+and it prevents the user from “messing” with the app logic |
+by manually changing the URL. |
+</p> |
+ |
+<p> |
+Packaged apps are loaded differently than web apps. |
+Both load the same type of content: |
+HTML documents with CSS and JavaScript; |
+however, a packaged app is loaded in the app container, |
+not in the browser tab. |
+Also, the app container must load the main document |
+of the packaged app from a local source. |
+This forces all packaged apps to be at least minimally functional |
+when offline and it provides a place |
+to enforce stricter security measures. |
+</p> |
+ |
+<img src="{{static}}/images/container.png" |
+ width="671" |
+ height="172" |
+ alt="how app container model works"> |
+ |
+ |
+<h2 id="programming">Programming model</h2> |
+ |
+<p> |
+The programming model describes the lifecycle |
+and window behavior of packaged apps. |
+Similar to native apps, |
+the goal of this programming model is to give users |
+and their systems full control over the app lifecycle. |
+The packaged app lifecycle should be independent |
+of browser window behavior or a network connection. |
+</p> |
+ |
+<p> |
+The “event page” manages the packaged app lifecycle |
+by responding to user gestures and system events. |
+This page is invisible, only exists in the background, |
+and can be closed automatically by the system runtime. |
+It controls how windows open and close and |
+when the app is started or terminated. |
+There can only be one “event page” for a packaged app. |
+<p> |
+ |
+<p> |
+<iframe title="YouTube video player" width="610" height="380" src="http://www.youtube.com/embed/yr1jgREbH8U" frameborder="0" allowfullscreen></iframe> |
+</p> |
+ |
+<h3>App lifecycle at a glance</h3> |
+ |
+<p> |
+For detailed instructions on how to use the programming model, |
+see <a href="app_lifecycle.html">Manage App Lifecycle</a>. |
+Here's a brief summary of the packaged app lifecyle |
+to get you started: |
+</p> |
+ |
+<br> |
+ |
+<table border="0"> |
+ <tr> |
+ <th scope="col"> Stage </th> |
+ <th scope="col"> Summary </th> |
+ </tr> |
+ <tr> |
+ <td>Installation</td> |
+ <td>User chooses to install the app and explicitly accepts the |
+ <a href="manifest.html#permissions">permissions</a>. |
+ </td> |
+ </tr> |
+ <tr> |
+ <td>Startup</td> |
+ <td>The event page is loaded, |
+ the 'launch' event fires, |
+ and app pages open in windows. |
+ You |
+ <a href="app_lifecycle.html#eventpage">create the windows</a> |
+ that your app requires, |
+ how they look, and how they communicate |
+ with the event page and with other windows. |
+ </td> |
+ </tr> |
+ <tr> |
+ <td>Termination</td> |
+ <td>User can terminate apps at any time |
+ and app can be quickly restored to previous state. |
+ <a href="app_lifecycle.html#H3-7">Stashing data</a> |
+ protects against data loss.</td> |
+ </tr> |
+ <tr> |
+ <td>Update</td> |
+ <td>Apps can be updated at any time; |
+ however, the code that a packaged app is running |
+ cannot change during a startup/termination cycle.</td> |
+ </tr> |
+ <tr> |
+ <td>Uninstallation</td> |
+ <td>User can actively uninstall apps. |
+ When uninstalled, no executing code or |
+ private data is left behind.</td> |
+ </tr> |
+</table> |
+ |
+<h2 id="security">Security model</h2> |
+ |
+<p> |
+The packaged apps security model protects users |
+by ensuring their information is managed |
+in a safe and secure manner. |
+<a href="app_csp.html">Comply with CSP</a> |
+includes detailed information on how to comply with content security policy. |
+This policy blocks dangerous scripting |
+reducing cross-site scripting bugs |
+and protecting users against man-in-the-middle attacks. |
+</p> |
+ |
+<p> |
+Loading the packaged app main page locally provides a place |
+to enforce stricter security than the web. |
+Like Chrome extensions, |
+users must explicitly agree to trust the packaged app on install; |
+they grant the app permission to access and use their data. |
+Each API that your app uses will have its own permission. |
+The packaged apps security model also provides the ability |
+to set up privilege separation on a per window basis. |
+This allows you to minimize the code in your app |
+that has access to dangerous APIs, |
+while still getting to use them. |
+</p> |
+ |
+<p> |
+Packaged apps reuse Chrome extension process isolation, |
+and take this a step further by isolating storage and external content. |
+Each app has its own private storage area |
+and can’t access the storage of another app |
+or personal data (such as cookies) for websites that you use in your browser. |
+All external processes are isolated from the app. |
+Since iframes run in the same process as the surrounding page, |
+they can only be used to load other app pages. |
+You can use the <code>object</code> tag to |
+<a href="app_external.html">embed external content</a>; |
+this content runs in a separate process from the app. |
+</p> |
+ |
+<p> |
+<iframe title="YouTube video player" width="610" height="380" src="http://www.youtube.com/embed/EDtiWN42lHs" frameborder="0" allowfullscreen></iframe> |
+</p> |
+ |
+<p class="backtotop"><a href="#top">Back to top</a></p> |