Sample-push notifications-javascript

Ask tech team
From QuickBlox Developers (API docs, code samples, SDK)
Jump to: navigation, search


Contents

Guide: Getting Started with Push Notifications API

Getting a QuickBlox account

https://admin.quickblox.com/register

Creating applications in the Admin panel

https://admin.quickblox.com/apps/new

For further reading there is also this 5 minute guide.

Connecting QuickBlox to your application

To get the information on how to connect to the QuickBlox library, please, refer to the Connect Javascript SDK to Web and Node.js applications page.

How QuickBlox Push Notifications work

There are 2 ways that you can integrate Push Notifications into your app:

  1. Broadcasting the same message to all users. It's a simple method which can be used in informational apps that do not authenticate users and where same push notification messages are broadcasted to everybody. This way when you want to send a push message you may 1) simply go to Admin panel -> Push Notifications -> type your message in Simple mode -> and hit "Send" for all of your users to receive the message; 2) Send a push using Push Notifications API (explained below). Following this way you only need to create ONE QuickBlox User which will have all of your users' devices associated with it. Then simply send your pushes to that User.
  2. Send individual push alerts. This is when you want to individually send push notifications to a particular user or a group of users (for example notify users of a new chat message sent while they are offline or tell them about some deal/event happening in close proximity to their location). Following this way you need to have a QuickBlox User created for each of your app users. Note that there are easy ways to transparently create QB Users along with your existing users authentication system or have them sign up with Facebook/Twitter/OAuth (described in Users code sample reference) so your end users don't have to type any additional login credentials or know anything about QuickBlox.

Giving a user a Push Notification subscription

At this stage, it's not fully possible to subscribe to push notifications in all web browser environment.

QuickBlox Javascript SDK provides all needed methods to create push subscription, e.g.

var params = {
    notification_channels: 'gcm',
    device: {
        platform: 'android',
        udid: 'some browser tab or computer unique identifier'
    },
    push_token: {
        environment: 'development',
        client_identification_sequence: 'APA91bH91emYD8BYyveyO0C9M--p8xW9yTr1k_Nzr8-SfjCfSIljzYqNIX9fK9JxPsWm3NQ6P-zCDkdtktVLEYJI5CLfg_3_auErc_29piz2zLHp5OjK0RdFnod-j0Pclo-a57FaKWxvNSr_EBwbP_oFDuXo1x0ucQ'
    }
};
 
QB.pushnotifications.subscriptions.create(params, function(err, res){
    if (err) {
        // error
    } else {
        // success
    }
});

For Google Chrome push notifications you should use notification_channels=gcm. We did not test it in other browsers.


Sending Push Notifications

Send Push Notifications from the Admin panel

Just go to Push Notifications module on Admin panel, choose Environment, Channel, type the message and press the Send message button:

SendPushNotifications.png

Your message will be delivered to all subscribed Users. You will see:

NotifySuccess.png


Also you can set more options through Advanced mode like this:

  • Group of Users (using Tags) that will receive the message

    PushNotificationsTags.png

  • Delivery settings (delayed send, recurring, activity interval)

    PushNotificationsDeliverySettings.png


Send Push Notifications from application (via API)

It's possible to send 2 types of push notifications:

  1. Platform based Push Notifications
  2. Universal push notifications


Refer to the Push Notification Formats document to better understand what happens under hood.

Platform based Push Notifications

Platform based push notification will be delivered to specified platform only - for example, iOS or Android:

Send Push Notification to particular users (through their IDs)
var params = {
  notification_type: 'push',
  push_type: 'gcm', // 'gcm' is for Android, 'apns' - for iOS.
  user: {ids: [45,67]}, // recipients.
  environment: 'development', // environment, can be 'production' as well.
  message: QB.pushnotifications.base64Encode('...') // See how to form iOS or Android spesific push notifications 
};
 
QB.pushnotifications.events.create(params, function(err, response) {
  if (err) {
    console.log(err);
  } else {
    // success
  }
});


Send push notification to a group of users (via Tags)
var params = {
  notification_type: 'push',
  push_type: 'gcm', // 'gcm' is for Android, 'apns' - for iOS.
  user: {tags: {any: ["man", "car"]}}, // recipients.
  environment: 'development', // environment, can be 'production' as well.
  message: QB.pushnotifications.base64Encode('...') // See how to form iOS or Android spesific push notifications 
};
 
QB.pushnotifications.events.create(params, function(err, response) {
  if (err) {
    console.log(err);
  } else {
    // success
  }
});


Send VOIP Push Notifications (iOS only)

To initiate iOS VoIP push notification use push_type: 'apns_voip' in above example.

Universal push notifications

Universal push notifications will be delivered to all possible platforms and devices for specified users. With universal push notifications there are 2 ways to send it:

  1. Just send a simple push with text only
  2. With custom parameters


With custom parameters

Please refer to Universal Push Notifications payload format to get more details what parameters you can use and also how you can initiate iOS VoIP push notifications (you can initiate VoIP push by passing ios_voip: 1 parameter).

var pushCustomParams = {
  message: 'Message received from Bob',
  ios_badge: 5,
  ios_sound: 'mysound.wav',
  user_id: '234',
  thread_id: '144'
}
 
var params = {
  notification_type: 'push',
  user: {ids: [45,67]}, // recipients.
  environment: 'development', // environment, can be 'production' as well.
  message: QB.pushnotifications.base64Encode(JSON.stringify(pushCustomParams))
};
 
QB.pushnotifications.events.create(params, function(err, response) {
  if (err) {
    console.log(err);
  } else {
    // success
  }
});


Simple push with text
var params = {
  notification_type: 'push',
  user: {ids: [45,67]}, // recipients.
  environment: 'development', // environment, can be 'production' as well.
  message: QB.pushnotifications.base64Encode('hello QuickBlox!')
};
 
QB.pushnotifications.events.create(params, function(err, response) {
  if (err) {
    console.log(err);
  } else {
    // success
  }
});