| OLD | NEW |
|---|
| (Empty) |
| 1 <table class="intro"> | |
| 2 <tr> | |
| 3 <th scope="col"></th> | |
| 4 <th scope="col"></th> | |
| 5 </tr> | |
| 6 <tr> | |
| 7 <td><strong>Description:</strong></td> | |
| 8 <td>Use the <code>chrome.notifications</code> module | |
| 9 to create rich notifications using templates and | |
| 10 show these notifications to users in the system tray | |
| 11 (see <a href="#usage">Usage</a>).</td> | |
| 12 </tr> | |
| 13 <tr> | |
| 14 <td><strong>Availability:</strong></td> | |
| 15 <td>Google Chrome Dev Channel Only</td> | |
| 16 </tr> | |
| 17 <tr> | |
| 18 <td><strong>Permissions:</strong></td> | |
| 19 <td><code>"notifications"</code></td> | |
| 20 </tr> | |
| 21 <tr> | |
| 22 <td><strong>Learn more:</strong></td> | |
| 23 <td><a href="https://developers.google.com/live/shows/83992232-1001/">Chrome
Apps Office Hours: Rich Notifications</a></td> | |
| 24 </tr> | |
| 25 </table> | |
| 26 | |
| 27 <p class="warning"> | |
| 28 <b>Warning: </b> | |
| 29 Currently this API only works on ChromeOS and Windows. | |
| 30 </p> | |
| 31 | |
| 32 <h2 id="usage">Usage</h2> | |
| 33 | |
| 34 <p> | |
| 35 To use this API, | |
| 36 call the $ref:experimental.notification.create method, | |
| 37 passing in the notification details | |
| 38 via the <code>options</code> parameter: | |
| 39 </p> | |
| 40 | |
| 41 <pre> | |
| 42 chrome.experimental.notification | |
| 43 .create(id, options, creationCallback); | |
| 44 </pre> | |
| 45 | |
| 46 <p> | |
| 47 The $ref:experimental.notification.NotificationOptions must include the | |
| 48 $ref:experimental.notification.TemplateType | |
| 49 which defines available notification details | |
| 50 and how those details are displayed. | |
| 51 All four available template types | |
| 52 (<code>simple</code>, <code>basic</code>, <code>image</code>, <code>list</code>) | |
| 53 include the notification <code>title</code> and <code>message</code>. | |
| 54 </p> | |
| 55 | |
| 56 <p> | |
| 57 They can also include urls to icons or images. | |
| 58 The <code>simple</code>, <code>basic</code>, and <code>list</code> | |
| 59 templates link to small icons (<code>secondIconUrl</code>) displayed | |
| 60 to the left of the notification message. | |
| 61 The <code>image</code> template displays icons and images | |
| 62 more prominently than the text | |
| 63 (use <code>iconURL</code> or <code>imageURL</code>). | |
| 64 Due to a strict <a href="app_csp.html">Content Security Policy</a>, | |
| 65 all of these URLs in packaged apps should point to a local resource | |
| 66 or use a <a href="http://developer.chrome.com/apps/app_external.html">data URL</
a>. | |
| 67 </p> | |
| 68 | |
| 69 <p> | |
| 70 The <code>basic</code> template looks similar to <code>simple</code>, | |
| 71 and can also include an <code>expandedMessage</code>. | |
| 72 Here's an example: | |
| 73 </p> | |
| 74 | |
| 75 <pre> | |
| 76 var opt = { | |
| 77 templateType: "basic", | |
| 78 title: "Primary Title", | |
| 79 message: "Primary message to display", | |
| 80 expandedMessage: "Additional message", | |
| 81 secondIconURL: "url_to_small_icon" | |
| 82 } | |
| 83 </pre> | |
| 84 | |
| 85 <p> | |
| 86 The <code>list</code> template will display <code>items</code> | |
| 87 in a list format: | |
| 88 </p> | |
| 89 | |
| 90 <pre> | |
| 91 var opt = { | |
| 92 templateType: "list", | |
| 93 title: "Primary Title", | |
| 94 message: "Primary message to display", | |
| 95 secondIconURL: "url_to_small_icon", | |
| 96 items: [{ title: "Item1", message: "This is item 1."}, | |
| 97 { title: "Item2", message: "This is item 2."}, | |
| 98 { title: "Item3", message: "This is item 3."}] | |
| 99 } | |
| 100 </pre> | |
| 101 | |
| 102 <p> | |
| 103 Let us know if you have ideas for new templates with varying layouts | |
| 104 by filing a <a href="crbug.com/new">crbug</a>! | |
| 105 </p> | |
| 106 | |
| 107 <h2 id="events">Listening for and responding to events</h2> | |
| 108 | |
| 109 <p> | |
| 110 With the exception of the <code>simple</code> template, | |
| 111 all notifications can include event listeners and event handlers | |
| 112 which respond to user actions. | |
| 113 For example, | |
| 114 you can write an event handler to respond to an | |
| 115 $ref:experimental.notification.onButtonClicked event. | |
| 116 </p> | |
| 117 | |
| 118 <p>Consider including event listeners and handlers within the | |
| 119 <a href="app_lifecycle.html#create_event_page">event page</a>, | |
| 120 so that notifications can pop-up even when the app or extension isn't running. | |
| 121 </p> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 12313115:
Take notification API out of experimental. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src