| 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 |