Sign inSign up

SDK

SDK is a set of tools that you can use to manage resources on PushPushGo application. For the full SDK API documentation check the API section.

Setup

Getting started

To start using SDK you need to have a PushPushGo account. If you don’t have it, you should register first.

  1. Create an account at app.pushpushgo.com

  2. Create a project

Properties that you need to configure SDK are:

  • projectId - go to account settings in the application and get it from your projects list

  • vapidPublicKey - you can find it at project settings page

  • isHTTPS - whether your project is using https or http protocol

  • websitePushId - optional, for integration with Safari, can be found at project settings page

Initialization

Once you have a project in the application you can setup the SDK client.

  1. Add script tag to head section of your html file

index.html
<head>
    <script src="https://cdn.pushpushgo.com/scripts/sdk.js"></script>
</head>

2. Put sw.js file under root path of your service, with the projectId value from the application

sw.js
importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');

If you already have the sw.js file in your service, add the above content to it

If you put sw.js file in other path than root, specify it on client initialization with additional param swPath: '$serviceWorkerPath'

3. Initialize the client

const config = {
  projectId: $projectId,
  vapidPublicKey: $vapidPublicKey,
  isHTTPS: $isHTTPS,
  endpoint: 'https://api.pushpushgo.com',
  swPath?: $serviceWorkerPath,
  websitePushId?: $websitePushId,
};

const client = new ppg.sdk.Client(config);

Examples

With the SDK client configured, except from basic subscription to web push notifications, you can use it to create your own component for subscribing to web push notifications, segment your subscribers with tags, link them with your CRM database by setting custom id, or send data for automation purposes.

Custom subscribe button

  1. Initialize SDK client

  2. Use it to add web push registry functionality to button elements

let client;

function getClient() {
  if (!client) {
    const config = {
      projectId: $projectId,
      isHTTPS: $isHTTPS,
      vapidPublicKey: $vapidPublicKey,
      endpoint: 'https://api.pushpushgo.com',
    };

    client = new ppg.sdk.Client(config);
  }
  return client;
}

function subscribeButtonClickedHandler(event) {
  event.preventDefault();
  client
    .register()
    .then(subscriberId => {
      setState(`user subscribed with id: ${subscriberId}`, false)
    });
}

function unsubscribeButtonClickedHandler(event) {
  event.preventDefault();
  client
    .unsubscribe()
    .then(() => {
      setState('user unsubscribed', true)
    });
}

function setState(status, canSubscribe) {
  const li = document.createElement('li');
  li.innerText = status;
  
  document.querySelector('#state').appendChild(li);
  document.querySelector('#unsubscribe').disabled = canSubscribe;
  document.querySelector('#subscribe').disabled = !canSubscribe;
}

3. To test if the subscription was successful, you can send a transactional web push notification via API

curl --request POST \
  --url https://api.pushpushgo.com/project/$projectId/send/push \
  --header 'accept: application/json' \
  --header 'x-token: $x-token \
  --header 'content-type: application/json' \
  -d '{"to": $subscriberId, "message": {"title": "sdk example title", "body": "test sdk subscription example", "icon": "https://via.placeholder.com/150/150", "redirectLink": "https://www.google.com/"}}'

Set Custom ID

You can link web push subscriberId with your own identifier by setting the customId with client.setCustomId()

let client;

function getClient() {
  if (!client) {
    const config = {
      projectId: $projectId,
      isHTTPS: $isHTTPS,
      vapidPublicKey: $vapidPublicKey,
      endpoint: 'https://api.pushpushgo.com',
    };

    client = new ppg.sdk.Client(config);
  }
  return client;
}

function subscribe() {
  getClient()
    .isPushSupport()
    .then(() => client.isSubscribed())
    .then(isSubscribed => {
      if (!isSubscribed) {
        return client.register();
      } else {
        return client.getId();
      }
    })
    .catch(() => console.log('push is not supported'));
}

function setState(status) {
  const li = document.createElement('li');
  li.innerText = status;

  document.querySelector('#state').appendChild(li);
}

To be notified when customId is set, you can integrate with a Webhook subscriber:update

Add subscriber tags

To add tags to subscriber, use client.appendTags()

let client;

function getClient() {
  if (!client) {
    const config = {
      projectId: $projectId,
      isHTTPS: $isHTTPS,
      vapidPublicKey: $vapidPublicKey,
      endpoint: 'https://api.pushpushgo.com',
    };

    client = new ppg.sdk.Client(config);
  }
  return client;
}

function subscribe() {
  getClient()
    .isPushSupport()
    .then(() => client.isSubscribed())
    .then(isSubscribed => {
      if (!isSubscribed) {
        return client.register();
      } else {
        return client.getId();
      }
    })
    .catch(() => console.log('push is not supported'));
}

Send automation data

When you have automation configured in the app.pushpushgo, you will need to feed it with data, by sending a beacon by client.send() . Assume you have a selector with a name basket defined in the application, and you need to set it's value for the automation. In addition lets operate on tags that might be used in automation conditions and set the Custom ID.

let client;

function getClient() {
  if (!client) {
    const config = {
      projectId: $projectId,
      isHTTPS: $isHTTPS,
      vapidPublicKey: $vapidPublicKey,
      endpoint: 'https://api.pushpushgo.com',
    };

    client = new ppg.sdk.Client(config);
  }
  return client;
}

function subscribe() {
  getClient()
    .isPushSupport()
    .then(() => client.isSubscribed())
    .then(isSubscribed => {
      if (!isSubscribed) {
        return client.register();
      } else {
        return client.getId();
      }
    })
    .catch(() => console.log('push is not supported'));
}

Last updated