| 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">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.app.runtime.onLaunched.addListener(function() { | 78 chrome.app.runtime.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="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.app.runtime.onLaunched.addListener(function() { | 121 chrome.app.runtime.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="including">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="storing">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">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 |