| OLD | NEW |
| (Empty) | |
| 1 <!-- |
| 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --> |
| 9 <!doctype html> |
| 10 <html> |
| 11 <head> |
| 12 <meta charset="utf-8"> |
| 13 <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 14 <title><platinum-push-messaging> Demo</title> |
| 15 <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 16 <link rel="import" href="../../paper-styles/paper-styles.html"> |
| 17 <link rel="import" href="../../paper-styles/classes/global.html"> |
| 18 <link rel="import" href="../../paper-item/paper-item.html"> |
| 19 <link rel="import" href="../../paper-material/paper-material.html"> |
| 20 <link rel="import" href="../../paper-toggle-button/paper-toggle-button.html"
> |
| 21 <link rel="import" href="../platinum-push-messaging.html"> |
| 22 <link rel="manifest" href="manifest.json"> |
| 23 |
| 24 <style> |
| 25 .warning { |
| 26 border: 3px solid red; |
| 27 max-width: 500px; |
| 28 margin: 50px auto; |
| 29 padding: 30px; |
| 30 } |
| 31 |
| 32 paper-material { |
| 33 padding: 10px; |
| 34 } |
| 35 </style> |
| 36 </head> |
| 37 |
| 38 <body> |
| 39 <platinum-push-messaging |
| 40 title="You received a push message!" |
| 41 message="Yay! Now you can play around customizing it" |
| 42 > |
| 43 </platinum-push-messaging> |
| 44 |
| 45 <div id="unsupported" style="display: none;" class="warning"> |
| 46 Sorry, your browser doesn't support push notifications. |
| 47 </div> |
| 48 |
| 49 <div id="supported"> |
| 50 <paper-material elevation="1" style="margin: 20px auto; background-color:
white; max-width: 800px;"> |
| 51 |
| 52 <paper-item> |
| 53 <paper-item-body two-line class="layout vertical"> |
| 54 <div>You can sign up for push messaging with the demo as-is. However
, if you want to test it and actually send a real push message you will need to
provide your own details. Open up the manifest.json file and change the gcm_send
er_id to your own, and then re-enable messaging to get a new subscription ID.</d
iv> |
| 55 |
| 56 <div>See <a href="http://updates.html5rocks.com/2015/03/push-notific
atons-on-the-open-web#make-a-project-on-the-google-developer-console">the HTML5R
ocks guide to push notifications</a> for details on signing up for the necessary
key and sender ID.</div> |
| 57 </paper-item-body> |
| 58 </paper-item> |
| 59 |
| 60 <br/> |
| 61 |
| 62 <paper-item> |
| 63 <paper-item-body two-line class="layout vertical"> |
| 64 <div> |
| 65 Enable push messaging |
| 66 </div> |
| 67 <div> |
| 68 <paper-toggle-button id="enable-push" toggles disabled></paper-tog
gle-button> |
| 69 </div> |
| 70 </paper-item-body> |
| 71 </paper-item> |
| 72 <paper-item> |
| 73 <paper-item-body two-line class="layout vertical"> |
| 74 <div> |
| 75 Current subscription |
| 76 </div> |
| 77 <div> |
| 78 <pre class="paper-font-code1" style="overflow: auto; margin: 5px;"
id="subscription"></pre> |
| 79 </div> |
| 80 </paper-item-body> |
| 81 </paper-item> |
| 82 <paper-item id="send-instructions"> |
| 83 <paper-item-body two-line class="layout vertical"> |
| 84 <div> |
| 85 Send a push (Mac/Unix) |
| 86 </div> |
| 87 <div> |
| 88 <pre class="paper-font-code1" style="overflow: auto; margin: 5px;"
>curl https://android.googleapis.com/gcm/send -d "registration_id=<span id="regi
stration-id"></span>" --header "Authorization: key=[YOUR_PUBLIC_API_KEY]"</pre> |
| 89 </div> |
| 90 </paper-item-body> |
| 91 </paper-item> |
| 92 </paper-material> |
| 93 </div> |
| 94 |
| 95 <script> |
| 96 document.addEventListener('WebComponentsReady', function() { |
| 97 var ppm = document.querySelector('platinum-push-messaging'); |
| 98 var toggle = document.getElementById('enable-push'); |
| 99 var subscription = document.getElementById('subscription'); |
| 100 var registrationId = document.getElementById('registration-id'); |
| 101 var sendInstructions = document.getElementById('send-instructions'); |
| 102 |
| 103 toggle.disabled = !ppm.supported; |
| 104 |
| 105 if (!ppm.supported) { |
| 106 document.getElementById('supported').style.display = 'none'; |
| 107 document.getElementById('unsupported').style.display = ''; |
| 108 } |
| 109 |
| 110 toggle.addEventListener('change', function() { |
| 111 if (toggle.checked) { |
| 112 ppm.enable(); |
| 113 } else { |
| 114 ppm.disable(); |
| 115 } |
| 116 }); |
| 117 |
| 118 ppm.addEventListener('subscription-changed', function(event) { |
| 119 subscription.textContent = JSON.stringify(ppm.subscription || undefined,
null, 2); |
| 120 registrationId.textContent = ppm.subscription ? ppm.subscription.subscri
ptionId : ''; |
| 121 }); |
| 122 |
| 123 ppm.addEventListener('enabled-changed', function(event) { |
| 124 toggle.checked = ppm.enabled; |
| 125 sendInstructions.style.display = ppm.enabled ? '' : 'none'; |
| 126 }); |
| 127 }); |
| 128 </script> |
| 129 </body> |
| 130 </html> |
| OLD | NEW |