<div dir="ltr"><p style="margin-right:0px;margin-bottom:15px;margin-left:0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px;margin-top:0px!important">
Hi,</p><p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">today I played with Apache Cordova, the <a href="https://github.com/phonegap-build/PushPlugin/tree/1.3.3" style="color:rgb(65,131,196);text-decoration:none">PushPlugin</a>, AeroGear.js (Notifier branch) and our UnifiedPush Server.</p>
<h3 style="margin:1em 0px 15px;padding:0px;font-size:1.5em;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif"><a name="setup" class="" href="https://gist.github.com/matzew/1513378b4efb700da46f#setup" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-left:30px"><span class=""></span></a>Setup</h3>
<p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">These steps from the <a href="http://aerogear.org/docs/guides/aerogear-push-ios/" style="color:rgb(65,131,196);text-decoration:none">iOS Tutorial</a> are required for an iOS-Cordova app as well:</p>
<ul style="margin:15px 0px;padding:0px 0px 0px 30px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px"><li>Apple App ID and SSL Certificate for APNs</li>
<li>Apple Provisioning Profile</li><li>The AeroGear Unified Push Server</li></ul><p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">
TL;DR: You need a new App-ID, a SSL-cert and a provisioning profile (for that APP-ID). On the UnifiedPush Server, you need a <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;line-height:normal;margin:0px 2px;padding:0px 5px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;white-space:nowrap">PushApplication</code> and an <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;line-height:normal;margin:0px 2px;padding:0px 5px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;white-space:nowrap">iOS Variant</code> :-)</p>
<h3 style="margin:1em 0px 15px;padding:0px;font-size:1.5em;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif"><a name="cordova-stuff" class="" href="https://gist.github.com/matzew/1513378b4efb700da46f#cordova-stuff" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-left:30px"><span class=""></span></a>Cordova stuff</h3>
<h4 style="margin:1em 0px 15px;padding:0px;font-size:1.2em;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif"><a name="pushplugin" class="" href="https://gist.github.com/matzew/1513378b4efb700da46f#pushplugin" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-left:30px"><span class=""></span></a>PushPlugin</h4>
<p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">Get the Cordova <a href="https://github.com/phonegap-build/PushPlugin/tree/1.3.3" style="color:rgb(65,131,196);text-decoration:none">PushPlugin</a> (there is a downloadable tarball) and extract the tarball to some location.</p>
<h4 style="margin:1em 0px 15px;padding:0px;font-size:1.2em;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif"><a name="cordova-app" class="" href="https://gist.github.com/matzew/1513378b4efb700da46f#cordova-app" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-left:30px"><span class=""></span></a>Cordova App</h4>
<p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">Creating a Corodva app is simple:</p><pre style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:13px;line-height:19px;margin-top:15px;margin-bottom:15px;background-color:rgb(248,248,248);border:1px solid rgb(221,221,221);overflow:auto;padding:6px 10px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:rgb(0,0,0)">
<code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;line-height:normal;margin:0px;padding:0px;border:none;background-color:transparent;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px">cordova create FolderOfTheApp com.my.id.AppName AppName
cd FolderOfTheApp
cordova platform add ios
cordova plugin add folder_of_PushPlugin-1.3.3
</code></pre><p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px"><strong>HINT:</strong> Make sure your Apple ID matches the above "com.my.id.AppName" value...</p>
<ul style="margin:15px 0px;padding:0px 0px 0px 30px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px"><li>Install <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;line-height:normal;margin:0px 2px;padding:0px 5px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;white-space:nowrap">aerogear.js</code> (checkout (and build) the Notifier branch) and <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;line-height:normal;margin:0px 2px;padding:0px 5px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;white-space:nowrap">jquery.min.js</code> -> I basically copied the files into the "www" folder;</li>
</ul><p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">afterwards build the project:</p><pre style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:13px;line-height:19px;margin-top:15px;margin-bottom:15px;background-color:rgb(248,248,248);border:1px solid rgb(221,221,221);overflow:auto;padding:6px 10px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:rgb(0,0,0)">
<code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;line-height:normal;margin:0px;padding:0px;border:none;background-color:transparent;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px">cordova build
</code></pre><p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">Now open the generated Xcode project, and start "hacking".</p>
<ul style="margin:15px 0px;padding:0px 0px 0px 30px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px"><li>In the <a href="https://github.com/matzew/UPCordovaPlayings/blob/master/CordovaTest/platforms/ios/www/index.html" style="color:rgb(65,131,196);text-decoration:none"><code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;line-height:normal;margin:0px 2px;padding:0px 5px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;white-space:nowrap">index.html</code></a> I just linked the "required" JavaScript sources.</li>
<li>The <a href="https://github.com/matzew/UPCordovaPlayings/blob/master/CordovaTest/platforms/ios/www/js/index.js" style="color:rgb(65,131,196);text-decoration:none"><code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;line-height:normal;margin:0px 2px;padding:0px 5px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;white-space:nowrap">index.JS</code></a> contains some JavaScript, that takes care of:<ul style="margin:0px;padding:0px 0px 0px 30px">
<li><a href="https://github.com/matzew/UPCordovaPlayings/blob/master/CordovaTest/platforms/ios/www/js/index.js#L16" style="color:rgb(65,131,196);text-decoration:none">Trigger the PushPlugin/UnifiedPush setup</a></li><li><a href="https://github.com/matzew/UPCordovaPlayings/blob/master/CordovaTest/platforms/ios/www/js/index.js#L53-L61" style="color:rgb(65,131,196);text-decoration:none">Setup of the Cordova PushPlugin</a></li>
<li><a href="https://github.com/matzew/UPCordovaPlayings/blob/master/CordovaTest/platforms/ios/www/js/index.js#L27-L48" style="color:rgb(65,131,196);text-decoration:none">The received (APNs) device-token is "submitted" to the UnifiedPush Server (using AeroGear.js)</a></li>
<li><a href="https://github.com/matzew/UPCordovaPlayings/blob/master/CordovaTest/platforms/ios/www/js/index.js#L2-L4" style="color:rgb(65,131,196);text-decoration:none">Handling iOS/APNs notifications</a></li></ul></li></ul>
<p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">This all works well. However, I had to do some "hack" to be able to use the <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;line-height:normal;margin:0px 2px;padding:0px 5px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;white-space:nowrap">registerWithPushServer()</code>function:</p>
<pre style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:13px;line-height:19px;margin-top:15px;margin-bottom:15px;background-color:rgb(248,248,248);border:1px solid rgb(221,221,221);overflow:auto;padding:6px 10px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:rgb(0,0,0)">
<code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;line-height:normal;margin:0px;padding:0px;border:none;background-color:transparent;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px">var tokenContainer = {};
tokenContainer.channelID = deviceToken;
</code></pre><p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">That is because the JS does expect the token/channelID as the above ".channelID". I am sure that can be made a bit more flexible.</p>
<p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">Also, the "metadata" currently is only able to specify the following values:</p>
<ul style="margin:15px 0px;padding:0px 0px 0px 30px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px"><li>deviceToken</li><li>alias</li>
<li>category</li></ul><p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">I am sure we can make it more generic here as well.</p>
<p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">So again, without too much work, I got it working:<a href="https://twitter.com/mwessendorf/status/356027736780836865" style="color:rgb(65,131,196);text-decoration:none">https://twitter.com/mwessendorf/status/356027736780836865</a></p>
<p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">However I had some issues.</p><h5 style="margin:1em 0px 15px;padding:0px;font-size:1em;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;line-height:22.727272033691406px">
<a name="pushplugin-1" class="" href="https://gist.github.com/matzew/1513378b4efb700da46f#pushplugin-1" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-left:30px"><span class=""></span></a>PushPlugin:</h5>
<p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">I had to copy the ObjC bits by hand. See <a href="https://github.com/phonegap-build/PushPlugin/issues/34" style="color:rgb(65,131,196);text-decoration:none">here</a>.</p>
<h5 style="margin:1em 0px 15px;padding:0px;font-size:1em;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;line-height:22.727272033691406px"><a name="aerogearjs" class="" href="https://gist.github.com/matzew/1513378b4efb700da46f#aerogearjs" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-left:30px"><span class=""></span></a>AeroGear.js</h5>
<ul style="margin:15px 0px;padding:0px 0px 0px 30px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px"><li><p style="margin:15px 0px">Uncaught TypeError: Cannot read property 'simplePushServerURL' of undefined aerogear.js:955 (anonymous function) aerogear.js:955 (anonymous function)</p>
<ul style="margin:0px;padding:0px 0px 0px 30px"><li>at least in the browser.... However, I could remove it, on the Corodva app .... and the app still seams to work.... So, not sure :-)</li></ul></li><li><p style="margin:15px 0px">
looks like the Notifier branch requires sockjs Uncaught ReferenceError: SockJS is not defined aerogear.js:942 (anonymous function)</p><ul style="margin:0px;padding:0px 0px 0px 30px"><li>But again in the browser...., I could remove that "import" in my Cordova app. So, not sure here too :-)</li>
</ul></li></ul><p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">The (ugly) code is posted on my <a href="https://github.com/matzew/UPCordovaPlayings" style="color:rgb(65,131,196);text-decoration:none">GH account</a>.</p>
<p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">I guess we could convert this into a more "official" guide/tutorial at some point. This email should give some hints on getting started.</p>
<p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">Another question:</p><p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">
Perhaps we want to fork the PushPlugin and stick our AeroGear.js bits in there? So that all is ready ? I am not sure, just some idea.</p><p style="margin:15px 0px;color:rgb(0,0,0);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15.454545021057129px;line-height:22.727272033691406px">
Feedback welcome!</p><div><br></div>-- <br>Matthias Wessendorf <br><br>blog: <a href="http://matthiaswessendorf.wordpress.com/" target="_blank">http://matthiaswessendorf.wordpress.com/</a><br>sessions: <a href="http://www.slideshare.net/mwessendorf" target="_blank">http://www.slideshare.net/mwessendorf</a><br>
twitter: <a href="http://twitter.com/mwessendorf" target="_blank">http://twitter.com/mwessendorf</a>
</div>