@polymer/platinum-push-messaging

Demo and API Docs

##<platinum-push-messaging>

<platinum-push-messaging> sets up a push messaging subscription and allows you to define what happens when a push message is received.

The element can be placed anywhere, but should only be used once in a page. If there are multiple occurrences, only one will be active.

Sample

For a complete sample that uses the element, see the Cat Push Notifications project.

Requirements

Push messaging is currently only available in Google Chrome, which requires you to configure Google Cloud Messaging. Chrome will check that your page links to a manifest file that contains a gcm_sender_id field. You can find full details of how to set all of this up in the HTML5 Rocks guide to push notifications.

Notification details

The data for how a notification should be displayed can come from one of three places.

Firstly, you can specify a URL from which to fetch the message data.

<platinum-push-messaging
  message-url="notification-data.json">
</platinum-push-messaging>

The second way is to send the message data in the body of the push message from your server. In this case you do not need to configure anything in your page:

<platinum-push-messaging></platinum-push-messaging>

Note that this method is not currently supported by any browser. It is, however, defined in the draft W3C specification and this element should use that data when it is implemented in the future.

If a message-url is provided then the message body will be ignored in favor of the first method.

Thirdly, you can manually define the attributes on the element:

<platinum-push-messaging
  title="Application updated"
  message="The application was updated in the background"
  icon-url="icon.png"
  click-url="notification.html">
</platinum-push-messaging>

These values will also be used as defaults if one of the other methods does not provide a value for that property.

Testing

If you have set up Google Cloud Messaging then you can send push messages to your browser by following the guide in the GCM documentation.

However, for quick client testing there are two options. You can use the testPush method, which allows you to simulate a push message that includes a payload.

Or, at a lower level, you can open up chrome://serviceworker-internals in Chrome and use the 'Push' button for the service worker corresponding to your app.