OLD | NEW |
1 <h1 id="informUsers">Keep Users Informed</h1> | 1 <h1 id="informUsers">Keep Users Informed</h1> |
2 | 2 |
3 <p> | 3 <p> |
4 Users engage with multiple devices throughout the day | 4 Users engage with multiple devices throughout the day |
5 and they like notifications keeping them informed | 5 and they like notifications keeping them informed |
6 without disrupting what's in front of them. | 6 without disrupting what's in front of them. |
7 </p> | 7 </p> |
8 | 8 |
9 <p> | 9 <p> |
10 You can keep your users informed and help them decide | 10 You can keep your users informed and help them decide |
11 when is a good time to re-engage with your app using | 11 when is a good time to re-engage with your app using |
12 <a href="cloudMessaging">Google Cloud Messaging (GCM)</a> and | 12 <a href="cloudMessaging">Google Cloud Messaging (GCM)</a> and |
13 <a href="richNotifications">Rich Notifications</a> APIs. | 13 <a href="richNotifications">Rich Notifications</a> APIs. |
14 </p> | 14 </p> |
15 | 15 |
16 <p><img src="{{static}}/images/notifications.png" | 16 <p><img src="{{static}}/images/notifications.png" |
17 alt="Notifications in system user tray"> | 17 alt="Notifications in system user tray"> |
18 </p> | 18 </p> |
19 | 19 |
20 <p class="note"> | 20 <p class="note"> |
21 <b>GCM and Rich Notifications sample</b><br> | 21 <b>GCM and Rich Notifications sample</b><br> |
22 The <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/gcm-
notifications">gcm-notifications sample</a> | 22 The <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/samp
les/gcm-notifications">gcm-notifications sample</a> |
23 shows a simple integration between GCM and Rich Notifications API. | 23 shows a simple integration between GCM and Rich Notifications API. |
24 </p> | 24 </p> |
25 | 25 |
26 <h2 id="summary_workflow">Summary of user workflow</h2> | 26 <h2 id="summary_workflow">Summary of user workflow</h2> |
27 | 27 |
28 <p> | 28 <p> |
29 To keep users informed, | 29 To keep users informed, |
30 you need a way to push new information to your users | 30 you need a way to push new information to your users |
31 even when all your app's windows are closed or minimized. | 31 even when all your app's windows are closed or minimized. |
32 Here's a summary of the user workflow for a very simple email app | 32 Here's a summary of the user workflow for a very simple email app |
33 (a real email app would be a lot more sophisticated), | 33 (a real email app would be a lot more sophisticated), |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
88 | 88 |
89 <p class="note"> | 89 <p class="note"> |
90 <b>Enable GCM</b><br> | 90 <b>Enable GCM</b><br> |
91 To use GCM in your app or extension, | 91 To use GCM in your app or extension, |
92 you need to <a href="cloudMessaging#enable_gcm">enable it first</a>. | 92 you need to <a href="cloudMessaging#enable_gcm">enable it first</a>. |
93 </p> | 93 </p> |
94 | 94 |
95 <h2 id="send_message">Send message to app</h2> | 95 <h2 id="send_message">Send message to app</h2> |
96 | 96 |
97 <p> | 97 <p> |
98 Use the <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/
gcm-notifications">gcm-notifications sample</a> | 98 Use the <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/
samples/gcm-notifications">gcm-notifications sample</a> |
99 to generate a curl command to send a message to the server: | 99 to generate a curl command to send a message to the server: |
100 </p> | 100 </p> |
101 | 101 |
102 <pre> | 102 <pre> |
103 curl -H "Content-Type:application/x-www-form-urlencoded;charset=UTF-8" -H "Autho
rization: key=YOUR_APP_KEY" -d "registration_id=YOUR_REGISTRATION_ID" -d data.YO
UR_MESSAGE_KEY=YOUR_MESSAGE_VALUE https://android.googleapis.com/gcm/send | 103 curl -H "Content-Type:application/x-www-form-urlencoded;charset=UTF-8" -H "Autho
rization: key=YOUR_APP_KEY" -d "registration_id=YOUR_REGISTRATION_ID" -d data.YO
UR_MESSAGE_KEY=YOUR_MESSAGE_VALUE https://android.googleapis.com/gcm/send |
104 </pre> | 104 </pre> |
105 | 105 |
106 <p> | 106 <p> |
107 GCM servers route the message to all instances of Chrome running apps | 107 GCM servers route the message to all instances of Chrome running apps |
108 or extensions with one of the registration IDs. | 108 or extensions with one of the registration IDs. |
109 As long as Chrome is running, even if the extension or app is not running, | 109 As long as Chrome is running, even if the extension or app is not running, |
110 the app or extension's event page is woken up to deliver a message.</p> | 110 the app or extension's event page is woken up to deliver a message.</p> |
111 </p> | 111 </p> |
112 | 112 |
113 <h2 id="create_notification">Create notification</h2> | 113 <h2 id="create_notification">Create notification</h2> |
114 | 114 |
115 <p> | 115 <p> |
116 The <code>messageReceived</code> event handler goes in your event page | 116 The <code>messageReceived</code> event handler goes in your event page |
117 (see <a href="#get_data">Listen for new data</a> above). | 117 (see <a href="#get_data">Listen for new data</a> above). |
118 When the GCM service sends a message, | 118 When the GCM service sends a message, |
119 the event handler creates a notification: | 119 the event handler creates a notification: |
120 </p> | 120 </p> |
121 | 121 |
122 <pre> | 122 <pre> |
123 function messageReceived(message) { | 123 function messageReceived(message) { |
124 // A message is an object with a data property that | 124 // A message is an object with a data property that |
125 // consists of key-value pairs. | 125 // consists of key-value pairs. |
126 | 126 |
127 // Returns a new notification ID used in the notification. | 127 // Returns a new notification ID used in the notification. |
128 function getNotificationId() { | 128 function getNotificationId() { |
129 var id = Math.floor(Math.random() * 9007199254740992) + 1; | 129 var id = Math.floor(Math.random() * 9007199254740992) + 1; |
130 //Stores latest notification ID so that event handlers can access | 130 //Stores latest notification ID so that event handlers can access |
131 //notification when background page is closed. | 131 //notification when background page is closed. |
132 chrome.storage.local.set({'id': id}); | 132 chrome.storage.local.set({'id': id}); |
133 return id.toString(); | 133 return id.toString(); |
134 } | 134 } |
135 | 135 |
136 // Concatenate all key-value pairs to form a display string. | 136 // Concatenate all key-value pairs to form a display string. |
137 var messageString = ""; | 137 var messageString = ""; |
138 for (var key in message.data) { | 138 for (var key in message.data) { |
139 if (messageString != "") | 139 if (messageString != "") |
140 messageString += ", " | 140 messageString += ", " |
141 messageString += key + ":" + message.data[key]; | 141 messageString += key + ":" + message.data[key]; |
142 } | 142 } |
143 | 143 |
144 // Pop up a notification to show the GCM message. | 144 // Pop up a notification to show the GCM message. |
145 chrome.notifications.create(getNotificationId(), { | 145 chrome.notifications.create(getNotificationId(), { |
146 title: 'New email', | 146 title: 'New email', |
147 iconUrl: 'mail_128.png', | 147 iconUrl: 'mail_128.png', |
148 type: 'basic', | 148 type: 'basic', |
149 message: messageString | 149 message: messageString |
150 }, creationCallback); | 150 }, creationCallback); |
151 } | 151 } |
152 </pre> | 152 </pre> |
OLD | NEW |