Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(969)

Side by Side Diff: chrome/common/extensions/docs/templates/articles/app_codelab6_lifecycle.html

Issue 12221067: Move Chrome Apps Codelab docs to developer.chrome.com (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Addressed comments from Fang Jue Created 7 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 <h1 id="lab_6_lifecycle">Lab 6 - Lifecycle</h1> 1 <h1 id="lab_6_lifecycle">Lab 6 - Lifecycle</h1>
2 2
3 <p>Like everything in this world, apps have a lifecycle. They are installed, la unched, restarted, suspended when the system needs to free up resources and unin stalled. This lab will show you the basics of the Chrome app lifecycle and how its heart, the event page (aka background script), is used.</p> 3 <p>Like everything in this world, apps have a lifecycle. They are installed, la unched, restarted, suspended when the system needs to free up resources and unin stalled. This lab will show you the basics of the Chrome app lifecycle and how its heart, the event page (aka background script), is used.</p>
4 4
5 <h2 id="you_should_also_read">You should also read</h2> 5 <h2 id="you_should_also_read">You should also read</h2>
6 6
7 <p><a href="http://developer.chrome.com/apps/app_lifecycle.html">Manage App Life cycle</a> in Chrome app docs</p> 7 <p><a href="http://developer.chrome.com/apps/app_lifecycle.html">Manage App Life cycle</a> in Chrome app docs</p>
8 8
9 <h2 id="the_event_page">The event page</h2> 9 <h2 id="the_event_page">The event page</h2>
10 10
(...skipping 13 matching lines...) Expand all
24 24
25 <p>Execute your app as it is now, move and resize the window, close and restart it. The app will reopen in the original location, right? Now add a property <cod e>id</code> to the <a href="https://github.com/GoogleChrome/chrome-app-codelab/b lob/master/lab6_lifecycle/angularjs/main.js">main.js</a>, reload the app and tes t again:</p> 25 <p>Execute your app as it is now, move and resize the window, close and restart it. The app will reopen in the original location, right? Now add a property <cod e>id</code> to the <a href="https://github.com/GoogleChrome/chrome-app-codelab/b lob/master/lab6_lifecycle/angularjs/main.js">main.js</a>, reload the app and tes t again:</p>
26 26
27 <pre><code><pre> 27 <pre><code><pre>
28 chrome.app.runtime.onLaunched.addListener(function() { 28 chrome.app.runtime.onLaunched.addListener(function() {
29 chrome.app.window.create(&#39;index.html&#39;, 29 chrome.app.window.create(&#39;index.html&#39;,
30 {id: &#39;mainwindow&#39;, width: 500, height: 309}); 30 {id: &#39;mainwindow&#39;, width: 500, height: 309});
31 }); 31 });
32 </pre></code></pre> 32 </pre></code></pre>
33 33
34 If your application requires, you can open more than one window. 34 <p>If your application requires, you can open more than one window.</p>
35 35
36 <h2 id="the_onrestarted_event">The onRestarted event</h2> 36 <h2 id="the_onrestarted_event">The onRestarted event</h2>
37 37
38 The $ref:app.runtime.onRestarted event is not as essential as <code>onLaunched</ code>, but it might be relevant to certain types of apps. 38 <p>The $ref:app.runtime.onRestarted event is not as essential as <code>onLaunche d</code>, but it might be relevant to certain types of apps.
39 This event is executed when the app is restarted, for example, when Chrome quits , restarts, and the app is launched again. 39 This event is executed when the app is restarted, for example, when Chrome quits , restarts, and the app is launched again.
40 You can use this event to restore a transient state. 40 You can use this event to restore a transient state. </p>
41 41
42 For example, if your app has a form with several fields, you won&#39;t always wa nt to save the partial form while the user is typing. 42 <p>For example, if your app has a form with several fields, you won&#39;t always want to save the partial form while the user is typing.
43 If the user quits the app on purpose, she might not be interested keeping the pa rtial data. 43 If the user quits the app on purpose, she might not be interested keeping the pa rtial data.
44 If the Chrome runtime restarted for some reason other than by a user&#39;s inten tion, the user will want that data when the app is restarted. 44 If the Chrome runtime restarted for some reason other than by a user&#39;s inten tion, the user will want that data when the app is restarted.</p>
45 45
46 Let&#39;s change our code to save the Todo input field in $ref:storage as the us er types, only restoring it if the <code>onRestarted</code> event is triggered. 46 <p>Let&#39;s change our code to save the Todo input field in $ref:storage as the user types, only restoring it if the <code>onRestarted</code> event is triggere d.</p>
47 47
48 <p class="note"><b>Note:</b> We learned about <code>chrome.storage.sync</code> before, but <a href="http://developer.chrome.com/trunk/apps/storage.html#using-s ync">chrome.storage.local</a> wasn&#39;t mentioned until now. Both have exactly the same syntax, but the semantics of <code>chrome.storage.local</code> is, as t he name says, completely local. 48 <p class="note"><b>Note:</b> We learned about <code>chrome.storage.sync</code> before, but <a href="http://developer.chrome.com/trunk/apps/storage.html#using-s ync">chrome.storage.local</a> wasn&#39;t mentioned until now. Both have exactly the same syntax, but the semantics of <code>chrome.storage.local</code> is, as t he name says, completely local.
49 There&#39;s no attempt to synchronize or to save the data in the cloud.</p> 49 There&#39;s no attempt to synchronize or to save the data in the cloud.</p>
50 50
51 <ul> 51 <ul>
52 <li>Event page: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob /master/lab6_lifecycle/angularjs/main.js">main.js</a> 52 <li>Event page: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob /master/lab6_lifecycle/angularjs/main.js">main.js</a>
53 <pre> 53 <pre>
54 chrome.app.runtime.onLaunched.addListener(function() { 54 chrome.app.runtime.onLaunched.addListener(function() {
55 // normal launch initiated by the user, let&#39;s start clean. 55 // normal launch initiated by the user, let&#39;s start clean.
56 // note that this is not related to the persistent state, which is 56 // note that this is not related to the persistent state, which is
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after
105 saveTransientState();<br> 105 saveTransientState();<br>
106 }) 106 })
107 }) 107 })
108 </pre></p></li><li><p>Save the changes by reloading the app: open the app, right -click and select Reload.</p></li> 108 </pre></p></li><li><p>Save the changes by reloading the app: open the app, right -click and select Reload.</p></li>
109 </ul> 109 </ul>
110 110
111 <p>If Chrome and the app shuts down for any reason (other than a user-gesture), the <code>onRestarted</code> event is fired. 111 <p>If Chrome and the app shuts down for any reason (other than a user-gesture), the <code>onRestarted</code> event is fired.
112 Any text entered in the input field (but not yet saved as a Todo item) will reap pear when Chrome and the app are reopened.</p> 112 Any text entered in the input field (but not yet saved as a Todo item) will reap pear when Chrome and the app are reopened.</p>
113 113
114 <p class="note"><b>Note:</b> If you get stuck and want to see the app in action , go to <code>chrome://extensions</code>, 114 <p class="note"><b>Note:</b> If you get stuck and want to see the app in action , go to <code>chrome://extensions</code>,
115 load the unpacked <a href="app_codelab6_lifecycle.html">lab6_lifecycle</a>, and launch the app from a new tab.</p> 115 load the unpacked <a href="https://github.com/GoogleChrome/chrome-app-codelab/tr ee/master/lab6_lifecycle">lab6 app</a>, and launch the app from a new tab.</p>
116 116
117 <h1 id="takeaways_">Takeaways:</h1> 117 <h1 id="takeaways_">Takeaways:</h1>
118 118
119 <ul> 119 <ul>
120 <li>The event page may continue to run even when your windows are closed. You ca n move logic that is shared among windows to the event page, as we will see in < a href="app_codelab9_multipleviews.html">lab9</a>.</li> 120 <li>The event page may continue to run even when your windows are closed. You ca n move logic that is shared among windows to the event page, as we will see in < a href="app_codelab9_multipleviews.html">lab9</a>.</li>
121 </ul> 121 </ul>
122 122
123 <h1 id="what_39_s_next_">What&#39;s next?</h1> 123 <h1 id="what_39_s_next_">What&#39;s next?</h1>
124 124
125 <p>In <a href="app_codelab7_useridentification.html">lab7_useridentification</a> , 125 <p>In <a href="app_codelab7_useridentification.html">lab7_useridentification</a> ,
126 you will learn how to identify users and use OAuth2.0 to access Google and other third party services.</p> 126 you will learn how to identify users and use OAuth2.0 to access Google and other third party services.</p>
127 127
128 <p class="note"><b>Note:</b> The <a href="http://developer.chrome.com/trunk/app s/app_identity.html">identify API</a> covered in lab 7 is still experimental.</p > 128 <p class="note"><b>Note:</b> The <a href="http://developer.chrome.com/trunk/app s/app_identity.html">identify API</a> covered in lab 7 is still experimental.</p >
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698