RoO RoO - 2 months ago 14x
Javascript Question

Polymer platinum-push-messaging element

I'm trying to figure it out how to use the polymer

element, but without luck. In the documentation for the element it says that you need to register your "gcm_sender_id" and then define the element itself, like this:

title="Application updated"
message="The application was updated in the background"

In order to test it there is a method called
but it always returns me the following error:

platinum-push-messaging.html:437 Uncaught (in promise) TypeError: Cannot read property 'active' of undefined(…)

I don't know if I'm forgetting something, and the Cat Push Notifications project doesn't help at all, i couldn't get it working...

Can anyone point me to the right direction??


The platinum-push-messaging element can be used to subscribe to push notifications using a gcm_sender_id (GCM stands for Google Cloud Messaging).

If you're hosting your project on Firebase, you can find your gcm_sender_id in the Console of your project > Project settings > Cloud Messaging.

Otherwise you can create a Project in the Google Developers Console and find the ID in the settings (Project Number).

Note: Due to the Requirements section in the Docs, push messaging is currently only available in Google Chrome.

But let's do a step by step demo (Works for MAC and UNIX - thats what the offical demo supports):

  1. Create a new folder and open a Terminal inside it
  2. Run bower init (for the bower.json)
  3. Run bower install PolymerElements/paper-elements (elements used by the offical demo we will use)
  4. Run bower install PolymerElements/platinum-push-messaging (you'll get the bower_components folder with everything needed for the demo)
  5. Get the offical demo for platinum-push-messaging and the manifest.json (copy those files inside the folder you've just created)
  6. In index.html change the 6 rel="imports" to the corresponding element's .html file inside bower_components and the webcomponents include to bower_components/webcomponentsjs/webcomponents-lite.min.js. The imports should look somewhat like this:

    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/paper-styles/paper-styles.html">
    <link rel="import" href="bower_components/paper-styles/classes/global.html">
    <link rel="import" href="bower_components/paper-item/paper-item.html">
    <link rel="import" href="bower_components/paper-material/paper-material.html">
    <link rel="import" href="bower_components/paper-toggle-button/paper-toggle-button.html">
    <link rel="import" href="bower_components/platinum-push-messaging/platinum-push-messaging.html">
    <link rel="manifest" href="manifest.json">
  7. Go to the Google Developers Console and create a project.

  8. Select "manage all projects", "Settings", select your project and copy the "Project number"
  9. Open the manifest.json and set gcm_sender_id to the copied number.
  10. Go back to the Google Developers Console and open the "API Manager" (left sidebar), "Credentials"
  11. Create a new Credential Server key and copy the API key (you will need it in a later step so save it in a .txt or something similar)
  12. Open "Library" and click "Google Cloud Messaging" and click Enable (top of the screen).
  13. Run polymer serve --open
  14. Click on the paper-toggle-button to enable push messaging (if the current subscription doesn't show anything, try to disable and reenable it)
  15. Copy the curl command at the bottom of the paper-material
  16. Paste the command to your Terminal and replace [YOUR_PUBLIC_API_KEY] with the API key you copied in step 11
  17. When you run the command, you should receive a push message!

Note: If you have problems finding stuff in the Google Developers Console, there is a great Tutorial.