OLD | NEW |
1 <table class="intro"> | 1 <table class="intro"> |
2 <tr> | 2 <tr> |
3 <th scope="col"></th> | 3 <th scope="col"></th> |
4 <th scope="col"></th> | 4 <th scope="col"></th> |
5 </tr> | 5 </tr> |
6 <tr> | 6 <tr> |
7 <td><strong>Description:</strong></td> | 7 <td><strong>Description:</strong></td> |
8 <td>Use the <code>chrome.experimental.notification</code> module | 8 <td>Use the <code>chrome.notifications</code> module |
9 to create rich notifications using templates and | 9 to create rich notifications using templates and |
10 show these notifications to users in the system tray | 10 show these notifications to users in the system tray |
11 (see <a href="#usage">Usage</a>).</td> | 11 (see <a href="#usage">Usage</a>).</td> |
12 </tr> | 12 </tr> |
13 <tr> | 13 <tr> |
14 <td><strong>Availability:</strong></td> | 14 <td><strong>Availability:</strong></td> |
15 <td>Experimental API. You must enable the | 15 <td>Google Chrome Dev Channel Only</td> |
16 <a href="experimental.html#using">"Experimental Extensions API"</a>.</td> | |
17 </tr> | 16 </tr> |
18 <tr> | 17 <tr> |
19 <td><strong>Permissions:</strong></td> | 18 <td><strong>Permissions:</strong></td> |
20 <td><code>"experimental"</code></td> | 19 <td><code>"notifications"</code></td> |
21 </tr> | 20 </tr> |
22 <tr> | 21 <tr> |
23 <td><strong>Learn more:</strong></td> | 22 <td><strong>Learn more:</strong></td> |
24 <td><a href="https://developers.google.com/live/shows/83992232-1001/">Chrome
Apps Office Hours: Rich Notifications</a></td> | 23 <td><a href="https://developers.google.com/live/shows/83992232-1001/">Chrome
Apps Office Hours: Rich Notifications</a></td> |
25 </tr> | 24 </tr> |
26 </table> | 25 </table> |
27 | 26 |
28 <p class="warning"> | 27 <p class="warning"> |
29 <b>Warning: </b> | 28 <b>Warning: </b> |
30 Currently this API only works on ChromeOS and Windows. | 29 Currently this API only works on ChromeOS and Windows. |
31 Linux and Mac should fail gracefully by displaying normal HTML5 notifications; | |
32 however, some information may not be displayed. | |
33 </p> | 30 </p> |
34 | 31 |
35 <h2 id="usage">Usage</h2> | 32 <h2 id="usage">Usage</h2> |
36 | 33 |
37 <p> | 34 <p> |
38 To use this API, | 35 To use this API, |
39 call the <a href="#method-create">create()</a> method, | 36 call the $ref:experimental.notification.create method, |
40 passing in the notification details | 37 passing in the notification details |
41 via the <code>options</code> parameter: | 38 via the <code>options</code> parameter: |
42 </p> | 39 </p> |
43 | 40 |
44 <pre> | 41 <pre> |
45 chrome.experimental.notification | 42 chrome.experimental.notification |
46 .create(id, options, creationCallback); | 43 .create(id, options, creationCallback); |
47 </pre> | 44 </pre> |
48 | 45 |
49 <p> | 46 <p> |
50 <a href="#type-NotificationOptions">NotificationOptions</a> must include the | 47 The $ref:experimental.notification.NotificationOptions must include the |
51 <a href="#type-TemplateType">TemplateType</a> | 48 $ref:experimental.notification.TemplateType |
52 which defines available notification details | 49 which defines available notification details |
53 and how those details are displayed. | 50 and how those details are displayed. |
54 All four available template types | 51 All four available template types |
55 (<code>simple</code>, <code>basic</code>, <code>image</code>, <code>list</code>) | 52 (<code>simple</code>, <code>basic</code>, <code>image</code>, <code>list</code>) |
56 include the notification <code>title</code> and <code>message</code>. | 53 include the notification <code>title</code> and <code>message</code>. |
57 </p> | 54 </p> |
58 | 55 |
59 <p> | 56 <p> |
60 They can also include urls to icons or images. | 57 They can also include urls to icons or images. |
61 The <code>simple</code>, <code>basic</code>, and <code>list</code> | 58 The <code>simple</code>, <code>basic</code>, and <code>list</code> |
62 templates link to small icons (<code>secondIconUrl</code>) displayed | 59 templates link to small icons (<code>secondIconUrl</code>) displayed |
63 to the left of the notification message. | 60 to the left of the notification message. |
64 The <code>image</code> template displays icons and images | 61 The <code>image</code> template displays icons and images |
65 more prominently than the text | 62 more prominently than the text |
66 (use <code>iconURL</code> or <code>imageURL</code>). | 63 (use <code>iconURL</code> or <code>imageURL</code>). |
67 Due to a strict <a href="app_csp.html">Content Security Policy</a>, | 64 Due to a strict <a href="app_csp.html">Content Security Policy</a>, |
68 all icon and image URLs in packaged apps should point to a local resource. | 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>. |
69 </p> | 67 </p> |
70 | 68 |
71 <p> | 69 <p> |
72 The <code>basic</code> template looks similar to <code>simple</code>, | 70 The <code>basic</code> template looks similar to <code>simple</code>, |
73 and can also include an <code>expandedMessage</code>. | 71 and can also include an <code>expandedMessage</code>. |
74 Here's an example: | 72 Here's an example: |
75 </p> | 73 </p> |
76 | 74 |
77 <pre> | 75 <pre> |
78 var opt = { | 76 var opt = { |
(...skipping 28 matching lines...) Expand all Loading... |
107 </p> | 105 </p> |
108 | 106 |
109 <h2 id="events">Listening for and responding to events</h2> | 107 <h2 id="events">Listening for and responding to events</h2> |
110 | 108 |
111 <p> | 109 <p> |
112 With the exception of the <code>simple</code> template, | 110 With the exception of the <code>simple</code> template, |
113 all notifications can include event listeners and event handlers | 111 all notifications can include event listeners and event handlers |
114 which respond to user actions. | 112 which respond to user actions. |
115 For example, | 113 For example, |
116 you can write an event handler to respond to an | 114 you can write an event handler to respond to an |
117 <a href="#event-onButtonClicked">onButtonClicked</a> event. | 115 $ref:experimental.notification.onButtonClicked event. |
118 </p> | 116 </p> |
119 | 117 |
120 <p>Consider including event listeners and handlers within the | 118 <p>Consider including event listeners and handlers within the |
121 <a href="app_lifecycle.html#create_event_page">event page</a>, | 119 <a href="app_lifecycle.html#create_event_page">event page</a>, |
122 so that notifications can pop-up even when the app or extension isn't running. | 120 so that notifications can pop-up even when the app or extension isn't running. |
123 </p> | 121 </p> |
OLD | NEW |