Update 6/13/2014: Fixed instructions to support XCode 5.1.1
Update 11/4/2015: Fixed filename of the entitlements file (use hyphens, not underscores)
We use PhoneGap Build to compile a number of iOS apps. It saves us the complexity of setting up and maintaining XCODE/PhoneGap build environments. We simply upload our web code and corresponding configuration files and get back an .ipa file ready for distribution.
One of our clients uses the app we build for in-house enterprise deployment. They need a copy of the .ipa file signed with their Enterprise certificate and their provisioning profile. They said “please just provide us an .xcarchive file so we can open it in the XCODE Organizer and distribute it.” But all we get from PhoneGap Build is an .ipa file. So what do we do?
Edit 2/27/2014 — There’s a new 3rd Party Plugin on PhoneGap Build that is probably a much better way to do this. I haven’t personally tried it yet, but check out the Customer URL Scheme plugin: https://build.phonegap.com/plugins/433
I love PhoneGap Build. It makes the whole process of building a hybrid app easy. No messing around with build servers for each type of device, no installing of patches when PhoneGap versions come out, and they have an API for automating builds. But the hidden cost is the inability to modify the native code when you want to. You are stuck with the options Build offers you. One of these limitations is in URL schemes.
iOS has always supported URL Schemes. This allows your app to respond to a URL. You’ve probably noticed that any url that starts with “mailto://” opens the Mail app and “maps://” opens the Maps app. You can register your own scheme so that “myapp://” opens your app and you can see any information passed in that URL. It’s a great way to make web pages link to your app and to have two apps talk to each other.
But while recent versions of PhoneGap have some built-in support for URL schemes, setting it up requires registering the scheme in your info.plist file. It’s a straightforward entry where you set CFBundleURLName and CFBundleURLSchemes (nice tutorial for iOS devs here). But since PhoneGap Build does not let you alter the info.plist file and the config.xml file does not support setting these values, you’re out of luck. There are requests to get this support added, but Adobe has not added it yet.
Never fear – I found a great workaround. Yes, it’s something of a hack, but it works. The secret is to use the officially supported FacebookConnect plugin. This plug in is meant to give access to Facebook for Single Sign On. We don’t need that functionality, but when the plugin is included in your project, it does setup the info.plist with a URL scheme.
I had two projects that I had published to the web server many times from Visual Studio 2010. I use web.config transformations to set my connection strings different based on which server I’m publishing too.
But while traveling I needed to make some edits using Visual Web Developer 2010 Express. When I published from that, I started seeing that my connection strings were getting replaced with something like “$(Replaceable Token…)” Huh?
After googling, the fix was easy. I had to open my .csproj file and add:
in the <PropertyGroup> section near the top. Not sure why I suddenly needed this, but it solved the problem!
A while back I needed to program a page flip effect in Silverlight, and Rick Barraza had an incredibly thorough blog post with lots of examples and great visuals. Now he has done it again, this time for HTML5 Canvas:
The Secret to the Page Flip in HTML5/Canvas for Windows8 and iOS | rbarraza.com.
Unfortunately I can’t seem find the old Silverlight blog post or I’d post that too.
This is a great article on Mashable on things to consider in designing a mobile app: http://mashable.com/2012/04/11/mobile-app-design-tips/
Their 10 points summarized are:
- Don’t Begin Wireframes or Designs Without a Flowmap
- Don’t Disregard the Development Budget
- Don’t Start With Low Resolutions & Avoid Bitmaps
- Don’t Undersize the Hit Area
- Don’t Gratuitously Use Intro Animations
- Don’t Leave Users Hanging
- Don’t Blindly Copy Style From Other Operating Systems
- Don’t Overstuff Pixel-Dense Screens
- Don’t Assume Everyone Will Use Your App The Same Way You Do
- Don’t Forget About Gestures, But Don’t Abuse Them Either
I just found an interesting jQuery bug. I was creating a <video> tag via jQuery, including the src attribute, and appending it to my container, like this:
$("#videoWrapper").append($("<video id='myVideo' src='video1.mp4' />"));
This worked and the video played fine, but when I was debugging in Fiddler I found it was actually downloading the video twice! It must be activating the tag somehow during the append process. That’s not so good for performance.
The fix was to add the src attribute afterwards:
$("#videoWrapper").append($("<video id='myVideo' />"));
There are probably some other ways to address it as well, but this worked!
When playing video on an iPad or iPhone, you never know how good a connection you will have. Are they on WiFi? 3G? Worse? And the quality of the connection could change in the middle. How do you play video on a mobile website and have it automatically adjust the quality in response to the connection? The answer is “HTTP Live Streaming”.
In HTTP Live Streaming, which unfortunately is only supported for Mobile and Desktop Safari (and native apps, I believe, but I’m focused on web right now), the video is broken into 10 seconds chunks that are then played like a playlist. You can have multiple sets of these chunks at different qualities, and the browser automatically adjusts to pull the highest quality stream it currently can afford. It’s pretty slick.
(image from Apple documentation)
There is a lot of good documentation out there, especially from Apple about how this works. Check out https://developer.apple.com/resources/http-streaming/ I won’t attempt to recreate all of that, but I did have a few hiccups and workarounds when I did it, so I wanted to document my steps.