OLD | NEW |
1 <meta name="doc-family" content="apps"> | 1 <meta name="doc-family" content="apps"> |
2 <h1>Manage App Lifecycle</h1> | 2 <h1>Manage App Lifecycle</h1> |
3 | 3 |
4 | 4 |
5 <p> | 5 <p> |
6 The app runtime and event page are responsible | 6 The app runtime and event page are responsible |
7 for managing the app lifecycle. | 7 for managing the app lifecycle. |
8 The app runtime manages app installation, | 8 The app runtime manages app installation, |
9 controls the event page, | 9 controls the event page, |
10 and can shutdown the app at anytime. | 10 and can shutdown the app at anytime. |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
42 | 42 |
43 <h2 id="eventpage">Create event page and windows</h2> | 43 <h2 id="eventpage">Create event page and windows</h2> |
44 | 44 |
45 <p> | 45 <p> |
46 All apps must have an event page. | 46 All apps must have an event page. |
47 This page contains the top-level logic of the application | 47 This page contains the top-level logic of the application |
48 with none of its own UI and is responsible | 48 with none of its own UI and is responsible |
49 for creating the windows for all other app pages. | 49 for creating the windows for all other app pages. |
50 </p> | 50 </p> |
51 | 51 |
52 <h3>Create event page</h3> | 52 <h3 id="create_event_page">Create event page</h3> |
53 | 53 |
54 <p> | 54 <p> |
55 To create the event page, | 55 To create the event page, |
56 include the "background" field in the app manifest | 56 include the "background" field in the app manifest |
57 and include the <code>background.js</code> in the scripts array. | 57 and include the <code>background.js</code> in the scripts array. |
58 Any library scripts used by the event page need to be added | 58 Any library scripts used by the event page need to be added |
59 to the "background" field first: | 59 to the "background" field first: |
60 </p> | 60 </p> |
61 | 61 |
62 <pre> | 62 <pre> |
(...skipping 10 matching lines...) Expand all Loading... |
73 This function is called | 73 This function is called |
74 when your application is launched in any way: | 74 when your application is launched in any way: |
75 </p> | 75 </p> |
76 | 76 |
77 <pre> | 77 <pre> |
78 chrome.experimental.app.onLaunched.addListener(function() { | 78 chrome.experimental.app.onLaunched.addListener(function() { |
79 // Tell your app what to launch and how. | 79 // Tell your app what to launch and how. |
80 }); | 80 }); |
81 </pre> | 81 </pre> |
82 | 82 |
83 <h3>Create windows</h3> | 83 <h3 id="create_windows">Create windows</h3> |
84 | 84 |
85 <p> | 85 <p> |
86 An event page may create one or more windows at its discretion. | 86 An event page may create one or more windows at its discretion. |
87 By default, these windows are created with a script connection | 87 By default, these windows are created with a script connection |
88 to the event page and are directly scriptable by the event page. | 88 to the event page and are directly scriptable by the event page. |
89 </p> | 89 </p> |
90 | 90 |
91 <p> | 91 <p> |
92 Windows can either be shells or panels. | 92 Windows can either be shells or panels. |
93 Shell windows have no browser chrome. | 93 Shell windows have no browser chrome. |
(...skipping 26 matching lines...) Expand all Loading... |
120 <pre> | 120 <pre> |
121 chrome.experimental.app.onLaunched.addListener(function() { | 121 chrome.experimental.app.onLaunched.addListener(function() { |
122 chrome.app.window.create('index.html', { | 122 chrome.app.window.create('index.html', { |
123 width: 400, | 123 width: 400, |
124 height: 200, | 124 height: 200, |
125 type: 'panel' | 125 type: 'panel' |
126 }); | 126 }); |
127 }); | 127 }); |
128 </pre> | 128 </pre> |
129 | 129 |
130 <h3>Including Launch Data</h3> | 130 <h3 id="launch_data">Including Launch Data</h3> |
131 | 131 |
132 <p> | 132 <p> |
133 Depending on how your app is launched, | 133 Depending on how your app is launched, |
134 you may need to include launch data | 134 you may need to include launch data |
135 in your event page. | 135 in your event page. |
136 By default, there is no launch data | 136 By default, there is no launch data |
137 when the app is started by the app launcher. | 137 when the app is started by the app launcher. |
138 For apps that provide intents, | 138 For apps that provide intents, |
139 you need to include the | 139 you need to include the |
140 <code>launchData.intent</code> parameter. | 140 <code>launchData.intent</code> parameter. |
(...skipping 11 matching lines...) Expand all Loading... |
152 | 152 |
153 <p> | 153 <p> |
154 The app runtime controls the app installs, updates, and uninstalls. | 154 The app runtime controls the app installs, updates, and uninstalls. |
155 You don't need to do anything to set up the app runtime, | 155 You don't need to do anything to set up the app runtime, |
156 but your event page can listen out for the <code>onInstalled()</code> event | 156 but your event page can listen out for the <code>onInstalled()</code> event |
157 to store local settings and the | 157 to store local settings and the |
158 <code>onSuspend()</code> event to do simple clean-up tasks | 158 <code>onSuspend()</code> event to do simple clean-up tasks |
159 before the event page is unloaded. | 159 before the event page is unloaded. |
160 </p> | 160 </p> |
161 | 161 |
162 <h3>Storing local settings</h3> | 162 <h3 id="local_settings">Storing local settings</h3> |
163 | 163 |
164 <p> | 164 <p> |
165 <code>chrome.runtime.onInstalled()</code> | 165 <code>chrome.runtime.onInstalled()</code> |
166 is called when your app has first been installed, | 166 is called when your app has first been installed, |
167 or when it has been updated. | 167 or when it has been updated. |
168 Any time this function is called, | 168 Any time this function is called, |
169 the <code>onInstalled</code> event is fired. | 169 the <code>onInstalled</code> event is fired. |
170 The event page can listen for this event and use the | 170 The event page can listen for this event and use the |
171 <a href="storage.html">Storage API</a> | 171 <a href="storage.html">Storage API</a> |
172 to store and update local settings | 172 to store and update local settings |
173 (see also <a href="app_storage.html#options">Storage options</a>). | 173 (see also <a href="app_storage.html#options">Storage options</a>). |
174 </p> | 174 </p> |
175 | 175 |
176 <pre> | 176 <pre> |
177 chrome.runtime.onInstalled.addListener(function() { | 177 chrome.runtime.onInstalled.addListener(function() { |
178 chrome.storage.local.set(object items, function callback); | 178 chrome.storage.local.set(object items, function callback); |
179 }); | 179 }); |
180 </pre> | 180 </pre> |
181 | 181 |
182 <h3>Preventing data loss</h3> | 182 <h3 id="preventing_loss">Preventing data loss</h3> |
183 | 183 |
184 <p> | 184 <p> |
185 Users can uninstall your app at any time. | 185 Users can uninstall your app at any time. |
186 When uninstalled, | 186 When uninstalled, |
187 no executing code or private data is left behind. | 187 no executing code or private data is left behind. |
188 This can lead to data loss | 188 This can lead to data loss |
189 since the users may be uninstalling an app | 189 since the users may be uninstalling an app |
190 that has locally edited, unsynchronized data. | 190 that has locally edited, unsynchronized data. |
191 You should stash data to prevent data loss. | 191 You should stash data to prevent data loss. |
192 </p> | 192 </p> |
193 | 193 |
194 <p> | 194 <p> |
195 At a minimum, | 195 At a minimum, |
196 you should store user settings | 196 you should store user settings |
197 so that if users reinstall your app, | 197 so that if users reinstall your app, |
198 their information is still available for reuse. | 198 their information is still available for reuse. |
199 Using the Storage API | 199 Using the Storage API |
200 (<a href="storage.html#property-sync">chrome.storage.sync</a>), | 200 (<a href="storage.html#property-sync">chrome.storage.sync</a>), |
201 user data can be automatically synced | 201 user data can be automatically synced |
202 with Chrome sync. | 202 with Chrome sync. |
203 </p> | 203 </p> |
204 | 204 |
205 <h3>Clean-up before app closes</h3> | 205 <h3 id="clean-up">Clean-up before app closes</h3> |
206 | 206 |
207 <p> | 207 <p> |
208 The app runtime sends the <code>onSuspend()</code> | 208 The app runtime sends the <code>onSuspend()</code> |
209 event to the event page before unloading it. | 209 event to the event page before unloading it. |
210 Your event page can listen out for this event and | 210 Your event page can listen out for this event and |
211 do clean-up tasks before the app closes. | 211 do clean-up tasks before the app closes. |
212 </p> | 212 </p> |
213 | 213 |
214 <p> | 214 <p> |
215 Once this event is fired, | 215 Once this event is fired, |
216 the app runtime starts the process of closing the app: | 216 the app runtime starts the process of closing the app: |
217 all events stop firing and | 217 all events stop firing and |
218 JavaScript execution is halted. | 218 JavaScript execution is halted. |
219 Any asynchronous operations started | 219 Any asynchronous operations started |
220 while handling this event are not guaranteed to complete. | 220 while handling this event are not guaranteed to complete. |
221 Keep the clean-up tasks synchronous and simple. | 221 Keep the clean-up tasks synchronous and simple. |
222 </p> | 222 </p> |
223 | 223 |
224 <pre> | 224 <pre> |
225 chrome.runtime.onSuspend.addListener(function() { | 225 chrome.runtime.onSuspend.addListener(function() { |
226 // Do some simple clean-up tasks. | 226 // Do some simple clean-up tasks. |
227 }); | 227 }); |
228 </pre> | 228 </pre> |
229 | 229 |
230 <p class="backtotop"><a href="#top">Back to top</a></p> | 230 <p class="backtotop"><a href="#top">Back to top</a></p> |
OLD | NEW |