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.experimental.notification</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>Experimental API. You must enable the | |
16 <a href="experimental.html#using">"Experimental Extensions API"</a>.</td> | |
miket_OOO
2013/03/04 22:06:56
See above. Current dev- canary- trunk only.
mkearney1
2013/03/06 00:03:40
Done.
| |
17 </tr> | |
18 <tr> | |
19 <td><strong>Permissions:</strong></td> | |
20 <td><code>"experimental"</code></td> | |
miket_OOO
2013/03/04 22:06:56
notifications
mkearney1
2013/03/06 00:03:40
Done.
| |
21 </tr> | |
22 <tr> | |
23 <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> | |
25 </tr> | |
26 </table> | |
27 | |
28 <p class="warning"> | |
29 <b>Warning: </b> | |
30 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. | |
miket_OOO
2013/03/04 22:06:56
This might not currently be the case on Linux/Mac,
mkearney1
2013/03/06 00:03:40
Cool. Removed sentence for now and starred the iss
| |
33 </p> | |
34 | |
35 <h2 id="usage">Usage</h2> | |
36 | |
37 <p> | |
38 To use this API, | |
39 call the <a href="#method-create">create()</a> method, | |
40 passing in the notification details | |
41 via the <code>options</code> parameter: | |
42 </p> | |
43 | |
44 <pre> | |
45 chrome.experimental.notification | |
46 .create(id, options, creationCallback); | |
47 </pre> | |
48 | |
49 <p> | |
50 <a href="#type-NotificationOptions">NotificationOptions</a> must include the | |
51 <a href="#type-TemplateType">TemplateType</a> | |
52 which defines available notification details | |
53 and how those details are displayed. | |
54 All four available template types | |
55 (<code>simple</code>, <code>basic</code>, <code>image</code>, <code>list</code>) | |
56 include the notification <code>title</code> and <code>message</code>. | |
57 </p> | |
58 | |
59 <p> | |
60 They can also include urls to icons or images. | |
61 The <code>simple</code>, <code>basic</code>, and <code>list</code> | |
62 templates link to small icons (<code>secondIconUrl</code>) displayed | |
63 to the left of the notification message. | |
64 The <code>image</code> template displays icons and images | |
65 more prominently than the text | |
66 (use <code>iconURL</code> or <code>imageURL</code>). | |
67 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. | |
miket_OOO
2013/03/04 22:06:56
... or use a data URL (see http://developer.chrome
mkearney1
2013/03/06 00:03:40
I changed the 'all icon and image URLs' to 'all of
| |
69 </p> | |
70 | |
71 <p> | |
72 The <code>basic</code> template looks similar to <code>simple</code>, | |
73 and can also include an <code>expandedMessage</code>. | |
74 Here's an example: | |
75 </p> | |
76 | |
77 <pre> | |
78 var opt = { | |
79 templateType: "basic", | |
80 title: "Primary Title", | |
81 message: "Primary message to display", | |
82 expandedMessage: "Additional message", | |
83 secondIconURL: "url_to_small_icon" | |
84 } | |
85 </pre> | |
86 | |
87 <p> | |
88 The <code>list</code> template will display <code>items</code> | |
89 in a list format: | |
90 </p> | |
91 | |
92 <pre> | |
93 var opt = { | |
94 templateType: "list", | |
95 title: "Primary Title", | |
96 message: "Primary message to display", | |
97 secondIconURL: "url_to_small_icon", | |
98 items: [{ title: "Item1", message: "This is item 1."}, | |
99 { title: "Item2", message: "This is item 2."}, | |
100 { title: "Item3", message: "This is item 3."}] | |
101 } | |
102 </pre> | |
103 | |
104 <p> | |
105 Let us know if you have ideas for new templates with varying layouts | |
106 by filing a <a href="crbug.com/new">crbug</a>! | |
107 </p> | |
108 | |
109 <h2 id="events">Listening for and responding to events</h2> | |
110 | |
111 <p> | |
112 With the exception of the <code>simple</code> template, | |
113 all notifications can include event listeners and event handlers | |
114 which respond to user actions. | |
115 For example, | |
116 you can write an event handler to respond to an | |
117 <a href="#event-onButtonClicked">onButtonClicked</a> event. | |
118 </p> | |
119 | |
120 <p>Consider including event listeners and handlers within the | |
121 <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. | |
123 </p> | |
OLD | NEW |