| Index: chrome/common/extensions/docs/server2/templates/articles/app_lifecycle.html
|
| diff --git a/chrome/common/extensions/docs/server2/templates/articles/app_lifecycle.html b/chrome/common/extensions/docs/server2/templates/articles/app_lifecycle.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..5e8d51b89e4336e5bb254fd2a4504ae6433bfca9
|
| --- /dev/null
|
| +++ b/chrome/common/extensions/docs/server2/templates/articles/app_lifecycle.html
|
| @@ -0,0 +1,230 @@
|
| +<meta name="doc-family" content="apps">
|
| +<h1>Manage App Lifecycle</h1>
|
| +
|
| +
|
| +<p>
|
| +The app runtime and event page are responsible
|
| +for managing the app lifecycle.
|
| +The app runtime manages app installation,
|
| +controls the event page,
|
| +and can shutdown the app at anytime.
|
| +The event page listens out for events from the app runtime
|
| +and manages what gets launched and how.
|
| +</p>
|
| +
|
| +<h2 id="lifecycle">How the lifecycle works</h2>
|
| +
|
| +<p>
|
| +The app runtime loads the event page
|
| +from a user's desktop and
|
| +the <code>onLaunch()</code> event is fired.
|
| +This event tells the event page what windows
|
| +to launch and their dimensions.
|
| +The lifecycle diagram here isn't the nicest to look at,
|
| +but it's practical (and we will make it nicer soon).
|
| +</p>
|
| +
|
| +<img src="{{static}}/images/applifecycle.png"
|
| + width="444"
|
| + height="329"
|
| + alt="how app lifecycle works">
|
| +
|
| +<p>
|
| +When the event page has no executing JavaScript,
|
| +no pending callbacks, and no open windows,
|
| +the runtime unloads the event page and closes the app.
|
| +Before unloading the event page,
|
| +the <code>onSuspend()</code> event is fired.
|
| +This gives the event page opportunity
|
| +to do simple clean-up tasks
|
| +before the app is closed.
|
| +</p>
|
| +
|
| +<h2 id="eventpage">Create event page and windows</h2>
|
| +
|
| +<p>
|
| +All apps must have an event page.
|
| +This page contains the top-level logic of the application
|
| +with none of its own UI and is responsible
|
| +for creating the windows for all other app pages.
|
| +</p>
|
| +
|
| +<h3>Create event page</h3>
|
| +
|
| +<p>
|
| +To create the event page,
|
| +include the "background" field in the app manifest
|
| +and include the <code>background.js</code> in the scripts array.
|
| +Any library scripts used by the event page need to be added
|
| +to the "background" field first:
|
| +</p>
|
| +
|
| +<pre>
|
| +"background": {
|
| + "scripts": [
|
| + "foo.js",
|
| + "background.js"
|
| + ]
|
| +}
|
| +</pre>
|
| +
|
| +<p>
|
| +Your event page must include the <code>onLaunched()</code> function.
|
| +This function is called
|
| +when your application is launched in any way:
|
| +</p>
|
| +
|
| +<pre>
|
| +chrome.experimental.app.onLaunched.addListener(function() {
|
| + // Tell your app what to launch and how.
|
| +});
|
| +</pre>
|
| +
|
| +<h3>Create windows</h3>
|
| +
|
| +<p>
|
| +An event page may create one or more windows at its discretion.
|
| +By default, these windows are created with a script connection
|
| +to the event page and are directly scriptable by the event page.
|
| +</p>
|
| +
|
| +<p>
|
| +Windows can either be shells or panels.
|
| +Shell windows have no browser chrome.
|
| +Panel windows are the same as shell windows,
|
| +except they have different size and position restrictions,
|
| +for example, a chat panel.
|
| +</p>
|
| +
|
| +<p>Here's a sample <code>background.js</code>
|
| + with a 'shell' window:</p>
|
| +
|
| +<pre>
|
| +chrome.experimental.app.onLaunched.addListener(function() {
|
| + chrome.app.window.create('main.html', {
|
| + width: 800,
|
| + height: 600,
|
| + minWidth: 800,
|
| + minHeight: 600,
|
| + left: 100,
|
| + top: 100,
|
| + type: 'shell'
|
| + });
|
| +});
|
| +</pre>
|
| +
|
| +<p>Here's a sample <code>background.js</code>
|
| + with a 'panel' window:
|
| +</p>
|
| +
|
| +<pre>
|
| +chrome.experimental.app.onLaunched.addListener(function() {
|
| + chrome.app.window.create('index.html', {
|
| + width: 400,
|
| + height: 200,
|
| + type: 'panel'
|
| + });
|
| +});
|
| +</pre>
|
| +
|
| +<h3>Including Launch Data</h3>
|
| +
|
| +<p>
|
| +Depending on how your app is launched,
|
| +you may need to include launch data
|
| +in your event page.
|
| +By default, there is no launch data
|
| +when the app is started by the app launcher.
|
| +For apps that provide intents,
|
| +you need to include the
|
| +<code>launchData.intent</code> parameter.
|
| +</p>
|
| +
|
| +<p>
|
| +Web intents can be launched by other apps invoking their intent,
|
| +or by the runtime when apps are launched to view or edit files,
|
| +for example from the operating system file explorer.
|
| +To find out how to launch an app with web intents,
|
| +see <a href="app_intents.html#launching">Launching an App with a File</a>.
|
| +</p>
|
| +
|
| +<h2 id="runtime">Listening for app runtime events</h2>
|
| +
|
| +<p>
|
| +The app runtime controls the app installs, updates, and uninstalls.
|
| +You don't need to do anything to set up the app runtime,
|
| +but your event page can listen out for the <code>onInstalled()</code> event
|
| +to store local settings and the
|
| +<code>onSuspend()</code> event to do simple clean-up tasks
|
| +before the event page is unloaded.
|
| +</p>
|
| +
|
| +<h3>Storing local settings</h3>
|
| +
|
| +<p>
|
| +<code>chrome.runtime.onInstalled()</code>
|
| +is called when your app has first been installed,
|
| +or when it has been updated.
|
| +Any time this function is called,
|
| +the <code>onInstalled</code> event is fired.
|
| +The event page can listen for this event and use the
|
| +<a href="storage.html">Storage API</a>
|
| +to store and update local settings
|
| +(see also <a href="app_storage.html#options">Storage options</a>).
|
| +</p>
|
| +
|
| +<pre>
|
| +chrome.runtime.onInstalled.addListener(function() {
|
| + chrome.storage.local.set(object items, function callback);
|
| +});
|
| +</pre>
|
| +
|
| +<h3>Preventing data loss</h3>
|
| +
|
| +<p>
|
| +Users can uninstall your app at any time.
|
| +When uninstalled,
|
| +no executing code or private data is left behind.
|
| +This can lead to data loss
|
| +since the users may be uninstalling an app
|
| +that has locally edited, unsynchronized data.
|
| +You should stash data to prevent data loss.
|
| +</p>
|
| +
|
| +<p>
|
| +At a minimum,
|
| +you should store user settings
|
| +so that if users reinstall your app,
|
| +their information is still available for reuse.
|
| +Using the Storage API
|
| +(<a href="storage.html#property-sync">chrome.storage.sync</a>),
|
| +user data can be automatically synced
|
| +with Chrome sync.
|
| +</p>
|
| +
|
| +<h3>Clean-up before app closes</h3>
|
| +
|
| +<p>
|
| +The app runtime sends the <code>onSuspend()</code>
|
| +event to the event page before unloading it.
|
| +Your event page can listen out for this event and
|
| +do clean-up tasks before the app closes.
|
| +</p>
|
| +
|
| +<p>
|
| +Once this event is fired,
|
| +the app runtime starts the process of closing the app:
|
| +all events stop firing and
|
| +JavaScript execution is halted.
|
| +Any asynchronous operations started
|
| +while handling this event are not guaranteed to complete.
|
| +Keep the clean-up tasks synchronous and simple.
|
| +</p>
|
| +
|
| +<pre>
|
| +chrome.runtime.onSuspend.addListener(function() {
|
| + // Do some simple clean-up tasks.
|
| +});
|
| +</pre>
|
| +
|
| +<p class="backtotop"><a href="#top">Back to top</a></p>
|
|
|