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

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

Issue 219213007: Remove .html extension from links (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 8 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
OLDNEW
1 <h1 id="lab_6_lifecycle">Manage App Lifecycle</h1> 1 <h1 id="lab_6_lifecycle">Manage App 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="the_event_page">The event page</h2> 5 <h2 id="the_event_page">The event page</h2>
6 6
7 <p>The event page is one of the most important pieces of a Chrome app. It&#39;s responsible for what gets launched, when, and how. 7 <p>The event page is one of the most important pieces of a Chrome app. It&#39;s responsible for what gets launched, when, and how.
8 For example, if your app is an instant messenger, you might want your event page to only show a UI when there is a new notification.</p> 8 For example, if your app is an instant messenger, you might want your event page to only show a UI when there is a new notification.</p>
9 9
10 <p>For simpler apps, the event page listens to the app lifecycle events and reac ts appropriately. 10 <p>For simpler apps, the event page listens to the app lifecycle events and reac ts appropriately.
(...skipping 17 matching lines...) Expand all
28 <p>Execute your app as it is now, move and resize the window, 28 <p>Execute your app as it is now, move and resize the window,
29 close and restart it. 29 close and restart it.
30 The app will reopen in the original location, right? 30 The app will reopen in the original location, right?
31 Now add a property <code>id</code> to the event page, 31 Now add a property <code>id</code> to the event page,
32 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab6_lif ecycle/angularjs/main.js">Angular main.js</a> or 32 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab6_lif ecycle/angularjs/main.js">Angular main.js</a> or
33 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab6_lif ecycle/javascript/main.js">JavaScript main.js</a>, 33 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab6_lif ecycle/javascript/main.js">JavaScript main.js</a>,
34 reload the app and test again:</p> 34 reload the app and test again:</p>
35 35
36 <pre data-filename="main.js"> 36 <pre data-filename="main.js">
37 chrome.app.runtime.onLaunched.addListener(function() { 37 chrome.app.runtime.onLaunched.addListener(function() {
38 chrome.app.window.create(&#39;index.html&#39;, 38 chrome.app.window.create(&#39;index&#39;,
39 {id: &#39;mainwindow&#39;, bounds: {width: 500, height: 309} }); 39 {id: &#39;mainwindow&#39;, bounds: {width: 500, height: 309} });
40 }); 40 });
41 </pre> 41 </pre>
42 42
43 <p>If your application requires, you can open more than one window.</p> 43 <p>If your application requires, you can open more than one window.</p>
44 44
45 <h2 id="the_onrestarted_event">The onRestarted event</h2> 45 <h2 id="the_onrestarted_event">The onRestarted event</h2>
46 46
47 <p>The $(ref:app.runtime.onRestarted) event is not as essential as <code>onLaunc hed</code>, 47 <p>The $(ref:app.runtime.onRestarted) event is not as essential as <code>onLaunc hed</code>,
48 but it might be relevant to certain types of apps. 48 but it might be relevant to certain types of apps.
49 This event is executed when the app is restarted, for example, 49 This event is executed when the app is restarted, for example,
50 when Chrome quits, restarts, and the app is launched again. 50 when Chrome quits, restarts, and the app is launched again.
51 You can use this event to restore a transient state.</p> 51 You can use this event to restore a transient state.</p>
52 52
53 <p>For example, if your app has a form with several fields, 53 <p>For example, if your app has a form with several fields,
54 you won&#39;t always want to save the partial form while the user is typing. 54 you won&#39;t always want to save the partial form while the user is typing.
55 If the user quits the app on purpose, she might not be interested keeping the pa rtial data. 55 If the user quits the app on purpose, she might not be interested keeping the pa rtial data.
56 If the Chrome runtime restarted for some reason other than by a user&#39;s inten tion, 56 If the Chrome runtime restarted for some reason other than by a user&#39;s inten tion,
57 the user will want that data when the app is restarted.</p> 57 the user will want that data when the app is restarted.</p>
58 58
59 <p>Let&#39;s change our code to save the Todo input field in $(ref:storage) as t he user types, 59 <p>Let&#39;s change our code to save the Todo input field in $(ref:storage) as t he user types,
60 only restoring it if the <code>onRestarted</code> event is triggered.</p> 60 only restoring it if the <code>onRestarted</code> event is triggered.</p>
61 61
62 <p class="note"><b>Note:</b> 62 <p class="note"><b>Note:</b>
63 We learned about <code>chrome.storage.sync</code> before, but 63 We learned about <code>chrome.storage.sync</code> before, but
64 <a href="storage.html#using-sync">chrome.storage.local</a> 64 <a href="storage#using-sync">chrome.storage.local</a>
65 wasn&#39;t mentioned until now. 65 wasn&#39;t mentioned until now.
66 Both have exactly the same syntax, 66 Both have exactly the same syntax,
67 but the semantics of <code>chrome.storage.local</code> is, as the name says, com pletely local. 67 but the semantics of <code>chrome.storage.local</code> is, as the name says, com pletely local.
68 There&#39;s no attempt to synchronize or to save the data in the cloud.</p> 68 There&#39;s no attempt to synchronize or to save the data in the cloud.</p>
69 69
70 <h3 id="event-page">Update event page</h3> 70 <h3 id="event-page">Update event page</h3>
71 71
72 <p>Update the event page to include the 72 <p>Update the event page to include the
73 <code>onLaunched</code> and <code>onRestarted</code> events. 73 <code>onLaunched</code> and <code>onRestarted</code> events.
74 Events are handled the same in 74 Events are handled the same in
75 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab6_lif ecycle/angularjs/main.js">AngularJS main.js</a> and 75 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab6_lif ecycle/angularjs/main.js">AngularJS main.js</a> and
76 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab6_lif ecycle/javascript/main.js">JavaScript main.js</a>: 76 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab6_lif ecycle/javascript/main.js">JavaScript main.js</a>:
77 </p> 77 </p>
78 78
79 <pre data-filename="main.js"> 79 <pre data-filename="main.js">
80 chrome.app.runtime.onLaunched.addListener(function() { 80 chrome.app.runtime.onLaunched.addListener(function() {
81 // normal launch initiated by the user, let&#39;s start clean. 81 // normal launch initiated by the user, let&#39;s start clean.
82 // note that this is not related to the persistent state, which is 82 // note that this is not related to the persistent state, which is
83 // appropriately handled in the window code. 83 // appropriately handled in the window code.
84 runApp(false); 84 runApp(false);
85 }); 85 });
86 86
87 chrome.app.runtime.onRestarted.addListener(function() { 87 chrome.app.runtime.onRestarted.addListener(function() {
88 // if restarted, try to get the transient saved state 88 // if restarted, try to get the transient saved state
89 runApp(true); 89 runApp(true);
90 }); 90 });
91 91
92 function runApp(readInitialState) { 92 function runApp(readInitialState) {
93 chrome.app.window.create(&#39;index.html&#39;, 93 chrome.app.window.create(&#39;index&#39;,
94 {id: &#39;mainwindow&#39;, bounds: {width: 500, height: 309} }, 94 {id: &#39;mainwindow&#39;, bounds: {width: 500, height: 309} },
95 // the create callback gets a reference to the AppWindow obj 95 // the create callback gets a reference to the AppWindow obj
96 function(win) { 96 function(win) {
97 // when the callback is executed, the DOM is loaded but no script was 97 // when the callback is executed, the DOM is loaded but no script was
98 // loaded yet. So, let&#39;s attach to the load event. 98 // loaded yet. So, let&#39;s attach to the load event.
99 win.contentWindow.addEventListener(&#39;load&#39;, function() { 99 win.contentWindow.addEventListener(&#39;load&#39;, function() {
100 if (readInitialState) { 100 if (readInitialState) {
101 win.contentWindow.setInitialState(); 101 win.contentWindow.setInitialState();
102 } else { 102 } else {
103 win.contentWindow.clearInitialState(); 103 win.contentWindow.clearInitialState();
(...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after
194 194
195 <h2 id="takeaways_">Takeaways</h2> 195 <h2 id="takeaways_">Takeaways</h2>
196 196
197 <ul> 197 <ul>
198 <li>The event page may continue to run even when your windows are closed; 198 <li>The event page may continue to run even when your windows are closed;
199 you can move logic that is shared amoung windows to the event page.</li> 199 you can move logic that is shared amoung windows to the event page.</li>
200 </ul> 200 </ul>
201 201
202 <h2 id="you_should_also_read">You should also read</h2> 202 <h2 id="you_should_also_read">You should also read</h2>
203 203
204 <p><a href="app_lifecycle.html">Manage App Lifecycle</a> tutorial</p> 204 <p><a href="app_lifecycle">Manage App Lifecycle</a> tutorial</p>
205 205
206 <h2 id="what_39_s_next_">What's next?</h2> 206 <h2 id="what_39_s_next_">What's next?</h2>
207 207
208 <p>In <a href="app_codelab7_useridentification.html">6 - Access User's Data</a>, 208 <p>In <a href="app_codelab7_useridentification">6 - Access User's Data</a>,
209 you will learn how to identify users and use OAuth2.0 to access Google and other third party services.</p> 209 you will learn how to identify users and use OAuth2.0 to access Google and other third party services.</p>
210 210
211 <p class="note"><b>Note:</b> 211 <p class="note"><b>Note:</b>
212 The next chapter covers a still experimental API. 212 The next chapter covers a still experimental API.
213 If you don't want to play with experimental APIs, feel free to skip it - the 213 If you don't want to play with experimental APIs, feel free to skip it - the
214 rest of the codelab is independent from it. 214 rest of the codelab is independent from it.
215 </p> 215 </p>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698