Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Client-Side Push Initiator

by Retired on ‎10-18-2013 08:49 AM - edited on ‎01-24-2014 10:53 AM by Retired (1,833 Views)

See the basic client/initiator sample implementation on Github here:

https://github.com/blackberry/BB10-WebWorks-Samples/tree/WebWorks-2.0/pushCaptureBasics

 

Feel free to ask any questions.

 

In this sample, the device will send the push back to itself for the purpose of being received by another application on the device, but it can be modified to send to other devices as well.

 

The client-side Push Receiver is implemented in the same way as we've always done. For more information, please see:

 

config.xml

 

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="1.0.0.0"
        id="com.oros.pi">

    <name>Push Initiator</name>
    <author>Erik Oros</author>
    <content src="index.html" />

    <access uri="https://pushapi.eval.blackberry.com" subdomains="true" />

    <feature id="blackberry.identity" />
    
    <rim:permissions>
        <rim:permit>read_device_identifying_information</rim:permit> 
    </rim:permissions>
</widget>

 

  • We are currently using EVAL push credentials, but for PROD credentials you will need to update the <access> element to white-list the production URL.

 

  • We are using the identify <feature> and read_device_identifying_information permission to get the device's current PIN; used to dynamically send the push back to ourselves.

 

index.html

 

<!DOCTYPE html>
<html>
    <head>
        <title>Push Initiator</title>
        <style type="text/css">
		html, body, #sendPush {
			border: 0px;
			margin: 0px;
			padding: 0px;
		}

		#sendPush {
			color: #A1A1A1;
			display: -webkit-flex;
			font-size: 60px;
			height: 1280px;
			left: 0px;
			right: 0px;
			top: 0px;
			-webkit-align-items: center;
			-webkit-flex-direction: column;
			-webkit-justify-content: center;
		}
        </style>
    </head>
    <body>
        <div id="sendPush">
            Tap to Send Push
        </div>

        <script type="text/javascript" src="local:///chrome/webworks.js"></script>
        <script type="text/javascript">
		function sendPush () {
			var config, postData, url, xhr;

			config = {
				'ppgUrl' : 'https://cp###.pushapi.eval.blackberry.com',
				'appId' : '###-###############################',
				'pwd' : '########',
				'recipient' : blackberry.identity.uuid.substring(2),
				'data' : JSON.stringify({
					'appName' : 'Breaking News!',
					'body' : 'Squirrel beats man at chess. It was nuts!',
					'key' : 'com.oros.pi',
					'url' : 'http://pushapi.eval.blackberry.com'
				})
			};
			config.authorization = window.btoa(config.appId + ':' + config.pwd);

			postData = '';
			postData += '--$(boundary)' + '\r\n';
			postData += 'Content-Type: application/xml; charset=UTF-8' + '\r\n';
			postData += '<?xml version="1.0"?>' + '\r\n';
			postData += '<!DOCTYPE pap PUBLIC "-//WAPFORUM//DTD PAP 1.0//EN" "http://www.openmobilealliance.org/tech/DTD/pap_1.0.dtd">' + '\r\n';
			postData += '<pap>' + '\r\n';
			postData += '<push-message push-id="$(pushid)"' + '\r\n';
			postData += '        source-reference="$(username)"' + '\r\n';
			postData += '        deliver-before-timestamp="2020-12-31T23:59:59Z" >' + '\r\n';
			postData += '<address address-value="$(addresses)"/>' + '\r\n';
			postData += '<quality-of-service delivery-method="$(deliveryMethod)"/>' + '\r\n';
			postData += '</push-message>' + '\r\n';
			postData += '</pap>' + '\r\n';
			postData += '--$(boundary)' + '\r\n';
			postData += '$(headers)' + '\r\n';
			postData += '\r\n';
			postData += '$(content)' + '\r\n';
			postData += '--$(boundary)--';

			postData = postData.replace(/\$\(boundary\)/g, 'qwertyuiop');
			postData = postData.replace(/\$\(pushid\)/g, new Date ().getTime());
			postData = postData.replace(/\$\(username\)/g, config.appId);
			postData = postData.replace(/\$\(addresses\)/g, config.recipient);
			postData = postData.replace(/\$\(deliveryMethod\)/g, 'unconfirmed');
			postData = postData.replace(/\$\(headers\)/g, 'Content-Type: text/plain');
			postData = postData.replace(/\$\(content\)/g, config.data);

			url = config.ppgUrl + '/mss/PD_pushRequest';

			xhr = new XMLHttpRequest ();

			xhr.open('POST', url, true);
			xhr.setRequestHeader('Content-Type', 'multipart/related; type="application/xml"; boundary="qwertyuiop"');
			xhr.setRequestHeader('Authorization', 'Basic ' + config.authorization);

			xhr.addEventListener('load', function onLoad (e) {
				console.log(this.status);
				console.log(this.response);
			}, false);
			xhr.addEventListener('error', function onError (e) {
				console.log(e);
			}, false);
			xhr.addEventListener('abort', function onAbort (e) {
				console.log(e);
			}, false);

			xhr.send(postData);

return true; } window.addEventListener('load', function onload () { document.querySelector('#sendPush').addEventListener('touchstart', function ontouchstart () { sendPush(); }, false); }, false); </script> </body> </html>

 

  • We start with some basic styling to display our elements in a readable fashion. When the page loads, we'll be showing Tap to Send Push in large letters in the center of the screen.

 

  • The config object must be updated.

 

    • ppgUrl: Update the cpid to match your own unique URL.

 

    • appId: Update to match the App ID provided with your own Push credentials. The digits before the hyphen (-) should match yoru cpid.

 

    • pwd: Update to match the Pwd provided with your own Push credentials; this is found under the Server section of the email.

 

    • recipient: Currently we are dynamically sending to ourselves. You can replace this with push_all to send to all recipients that are registered with your push service.

 

      • This sample application is only set up to push to one address (1 recipient or push_all.) If you want to push to multiple recipients, you will need to modify the template to include a unique <address> element for each recipient.

 

    • dataThe string that you want to send.

 

  • We use a template for the push defined in postData. Inside of this template are a number of tags that we replace with the actual push content. For example:

 

    • $(boundary), $(pushid), etc. These are simply strings that we look for and replace. The $ has no special meaning.

 

  • We then perform a standard XMLHttpRequest (Ajax) POST with our combined data.

 

  • Finally, in the load event, we are adding a touchstart listener to the main <div> element to allow us to initiate a push.
Users Online
Currently online: 4 members 962 guests
Please welcome our newest community members: