RoO RoO - 4 months ago 28
Javascript Question

Polymer platinum-push-messaging element

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

<platinum-push-messaging>
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:

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


In order to test it there is a method called
testPush(message)
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??

Answer

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.

Comments