Sending Push Notification with Pushwoosh

PreviousSending SMS with Twilio NextTroubleshooting and support

Last updated 6 years ago

Sending Push Notification with Pushwoosh

What You'll Need

Backbench account - , the personal account will always remain free to use.

Pushwoosh account - It helps you address your audience with highly customizable push notifications. Speak to the users on their own language, deliver your values and push the world.

Google account - _Firebase _is Google's mobile platform that helps you quickly develop high-quality apps and grow your business.

Prerequisites for the app

Open the FireBase Console. And create a new project. Click on ‘+Add project’ to create a new project.
Go to your Project Settings
Make a note of the server key and sender id. Never share your secret keys.
Go to the link “. Now Download Pushwoosh Web Push SDK.
Extract the file. You will have two files “manifest.json” and “pushwoosh-service-worker.js”.
1. Now open Backbench.
2. Go to your bench. And open the File Manager.
3. Here click on the + button in the corner.
4. From the dropdown click ‘Upload’
5. Drag the “manifest.json” to the dialogue box.
6. Make sure that the Folder path is set to root that is “/”.
7. Click on Upload.
8. Do the same with “pushwoosh-service-worker.js”.
9. Now open the “manifest.json”, by clicking in the three dots and then clicking Edit from the dropdown.
10. Change name and short\_name to the name of your website. This is the URL that you can find by going to the Endpoint section in Backbench.
11. Change gcm\_sender\_id to your Sender ID. Please keep in mind that Sender ID is usually a 12-digit number, and it can't contain any letters.
12. Now go to the + sign. Create a file called new.html.
Put the below code in the file.

Frontend

Copy and paste the code module from below.
Select save.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pushwoosh Web SDK Sample</title>

    <link rel="manifest" href="./manifest.json">
    <script src="https://cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
    <script type="text/javascript">
        var Pushwoosh = Pushwoosh || [];
        Pushwoosh.push(['init', {
            logLevel: 'info', // possible values: error, info, debug
            applicationCode: 'XXXX-XXXX', // you application code from Pushwoosh Control Panel
            safariWebsitePushID: 'web.com.example.domain', //  unique reverse-domain string, obtained in you Apple Developer Portal. Only needed if you send push notifications to Safari browser
            defaultNotificationTitle: 'Pushwoosh', // sets a default title for push notifications
            defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png', // URL to custom custom notification image
            autoSubscribe: true, // or true. If true, prompts a user to subscribe for pushes upon SDK initialization
            subscribeWidget: {
              enabled: true
            },
            userId: 'userId', // optional, set custom user ID
            tags: {
                'Name': 'John Smith' // optional, set custom Tags
            }
        }]);
    </script>
</head>
<body>
    <h1>Pushwoosh Web SDK usage sample</h1>
</body>
</html>

Backend

Now go and create an account at pushwoosh.com.
You will be taken to the Pushwoosh Control Panel. Here click on +AddNew to add a new application.
After you have created your application, you can find the Application code in the control panel of your app.
Substitute this application code in the code at step 18 in place of XXXX-XXXX applicationCode: 'XXXX-XXXX'
In the pushwoosh control panel go to Configure. Go to Chrome and click on configure.
Put the Server key and Sender ID from Step 3 in place of API key and GCM Sender ID respectively.

Now go to Backbench. Navigate to your bench and then go to modules. Create a “package.json” file, by clicking the + button.

In package.json write the following code.

{
    "dependencies": {
        "web-push-notifications": "^3.2.4"
    },
    "author": "Author"
}

Then go back and create a js file called pushwoosh.js. Write the following code.

var Pushwoosh= require('web-push-notifications').Pushwoosh;
module.exports.endpoint = function(req, cb)
{
    Pushwoosh.push(function(api) {
  // Set tags for a user
  api.setTags({
    'Tag Name 1': 'value1',
    'Tag Name 2': 'value2'
  });

  // Get tags for a user from server
  api.getTags();

  // Register user ID
  api.registerUser('myUserID');

  // Post an Event
  api.postEvent('myEventName', {attributeName: 'attributeValue'});

     //Unregister from notifications
  api.unregisterDevice();
});
}

After this go to the pushwoosh control panel.
Send a push by creating the push message and then send.
You will get a notification from the endpoint and you will also get the required message.