| OLD | NEW |
| 1 <h1 id="richNotifications">Rich Notifications</h1> | 1 <h1 id="richNotifications">Rich Notifications</h1> |
| 2 | 2 |
| 3 <p>The <a href="https://developer.chrome.com/apps/notifications">rich notificati
ons API</a> | 3 <p>The <a href="https://developer.chrome.com/apps/notifications">rich notificati
ons API</a> |
| 4 lets you create notifications using templates and | 4 lets you create notifications using templates and |
| 5 show these notifications to users in the user's system tray: | 5 show these notifications to users in the user's system tray: |
| 6 </p> | 6 </p> |
| 7 | 7 |
| 8 <p><img src="{{static}}/images/notifications.png" | 8 <p><img src="{{static}}/images/notifications.png" |
| 9 alt="Notifications in system user tray"> | 9 alt="Notifications in system user tray"> |
| 10 </p> | 10 </p> |
| (...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 61 the bell icon is lit when there's new notifications; | 61 the bell icon is lit when there's new notifications; |
| 62 On ChromeOS, | 62 On ChromeOS, |
| 63 the system tray keeps a count of all new notifications. | 63 the system tray keeps a count of all new notifications. |
| 64 Once a users sees the notifications in the system tray, | 64 Once a users sees the notifications in the system tray, |
| 65 the count is reset to zero; | 65 the count is reset to zero; |
| 66 </p> | 66 </p> |
| 67 | 67 |
| 68 <p> | 68 <p> |
| 69 Notifications can be assigned a priority between -2 to 2. | 69 Notifications can be assigned a priority between -2 to 2. |
| 70 Priorities < 0 are only shown in the center; | 70 Priorities < 0 are only shown in the center; |
| 71 priorities > 0 are shown for increasing duration and | 71 priorities > 0 are shown for increasing duration and |
| 72 more high priority notifications can be displayed in the system tray. | 72 more high priority notifications can be displayed in the system tray. |
| 73 </p> | 73 </p> |
| 74 | 74 |
| 75 <p> | 75 <p> |
| 76 In addition to displaying information, | 76 In addition to displaying information, |
| 77 all notification types can include up to two action items. | 77 all notification types can include up to two action items. |
| 78 When users click on an action item, | 78 When users click on an action item, |
| 79 your app can respond with the appropriate action. | 79 your app can respond with the appropriate action. |
| 80 For example, | 80 For example, |
| 81 when the user clicks on "Reply", | 81 when the user clicks on "Reply", |
| (...skipping 21 matching lines...) Expand all Loading... |
| 103 The $(ref:notifications.NotificationOptions) must include a | 103 The $(ref:notifications.NotificationOptions) must include a |
| 104 $(ref:notifications.TemplateType), | 104 $(ref:notifications.TemplateType), |
| 105 which defines available notification details | 105 which defines available notification details |
| 106 and how those details are displayed. | 106 and how those details are displayed. |
| 107 </p> | 107 </p> |
| 108 | 108 |
| 109 <p class="note"> | 109 <p class="note"> |
| 110 <b>Consider integrating with GCM!</b><br> | 110 <b>Consider integrating with GCM!</b><br> |
| 111 <a href="inform_users">Keep your users informed</a> all the time, | 111 <a href="inform_users">Keep your users informed</a> all the time, |
| 112 even when your app isn't opened. | 112 even when your app isn't opened. |
| 113 The <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/gcm-
notifications">gcm-notifications sample</a> | 113 The <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/samp
les/gcm-notifications">gcm-notifications sample</a> |
| 114 shows a simple integration between GCM and Rich Notifications API. | 114 shows a simple integration between GCM and Rich Notifications API. |
| 115 </p> | 115 </p> |
| 116 | 116 |
| 117 <h3 id="basic">Create basic notification</h3> | 117 <h3 id="basic">Create basic notification</h3> |
| 118 | 118 |
| 119 <p> | 119 <p> |
| 120 All template types | 120 All template types |
| 121 (<code>basic</code>, <code>image</code>, <code>list</code> and <code>progress</c
ode>) | 121 (<code>basic</code>, <code>image</code>, <code>list</code> and <code>progress</c
ode>) |
| 122 must include a notification <code>title</code> and <code>message</code>, | 122 must include a notification <code>title</code> and <code>message</code>, |
| 123 as well as an <code>iconUrl</code>, which is a link to a small icon that | 123 as well as an <code>iconUrl</code>, which is a link to a small icon that |
| 124 is displayed to the left of the notification message. | 124 is displayed to the left of the notification message. |
| (...skipping 87 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 212 <p>Event listener:</p> | 212 <p>Event listener:</p> |
| 213 | 213 |
| 214 <pre> | 214 <pre> |
| 215 chrome.notifications.onButtonClicked.addListener(replyBtnClick); | 215 chrome.notifications.onButtonClicked.addListener(replyBtnClick); |
| 216 </pre> | 216 </pre> |
| 217 | 217 |
| 218 <p>Event handler:</p> | 218 <p>Event handler:</p> |
| 219 | 219 |
| 220 <pre> | 220 <pre> |
| 221 function replyBtnClick { | 221 function replyBtnClick { |
| 222 » //Write function to respond to user action. | 222 » //Write function to respond to user action. |
| 223 } | 223 } |
| 224 </pre> | 224 </pre> |
| 225 | 225 |
| 226 <p>Consider including event listeners and handlers within the | 226 <p>Consider including event listeners and handlers within the |
| 227 <a href="app_lifecycle#create_event_page">event page</a>, | 227 <a href="app_lifecycle#create_event_page">event page</a>, |
| 228 so that notifications can pop-up even when the app or extension isn't running. | 228 so that notifications can pop-up even when the app or extension isn't running. |
| 229 </p> | 229 </p> |
| 230 | 230 |
| OLD | NEW |