<html><head><meta http-equiv="Content-Type" content="text/html charset=iso-8859-1"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><br><div><div>On Jul 13, 2013, at 10:54 AM, Matthias Wessendorf <<a href="mailto:matzew@apache.org">matzew@apache.org</a>> wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div dir="ltr"><p style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; "><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; 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; 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; 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; "><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; 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; 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; 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; "><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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15.454545021057129px; line-height: 22.727272033691406px; ">Another question:</p><p style="margin: 15px 0px; 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><div><br></div></div></blockquote>So This plugin is actually part of phone gap build, Which means people can get it easy. but at the same time, these types of plugins aren't as fast to upgrade</div><div><br></div><div>They include an example ruby "push server" in the example code. </div><div><br></div><div><br></div><div>I'm not sure how others feel about it, but i can be convinced of forking a copy, and then adding in our stuff, as well as adding a "FFOS" version that we could maybe contribute back upstream. </div><div><br></div><div>In one of the Phone Gap Day workshops, they are going to be talking about push notifications. so i'll report back.</div><div><br><blockquote type="cite"><div dir="ltr"><p style="margin: 15px 0px; 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>
_______________________________________________<br>aerogear-dev mailing list<br><a href="mailto:aerogear-dev@lists.jboss.org">aerogear-dev@lists.jboss.org</a><br>https://lists.jboss.org/mailman/listinfo/aerogear-dev</blockquote></div><br></body></html>