There was one particularly remember-able rejection I received from Apple. I was working with a not for profit organisation to create an app for an event they had coming up soon. Considering the time sensitivity of the project, I put a lot of care into making sure the app would not be rejected by Apple. I waited with bated breath for those seven or so torturous days the app was in the review queue, until I got a rejection notice at about 2:00 AM when I was out one night. Uh oh.
Why was it rejected? The app included a link to a donation page for the organisation which would launch an In App Browser (powered by the In App Browser PhoneGap Build plugin) to display the donation page. As it turns out, it’s fine to include a donation link in an iOS application but the link must be launched through the Safari browser.
Lesson learned.
It goes to show that even with the best intentions, there’s some pretty obscure reasons your app could be rejected by Apple. So it’s important to make sure you read over the App Store Review Guidelines, but there’s certainly no hard and fast rules about what’s in and what’s out.
How do I make sure my HTML5 app isn’t rejected?
There are obviously a lot of guidelines that apply to all app submissions, native or HTML5. But there is some things in particular you should pay more attention to given the nature of the HTML5 approach.
1. Your app is more like a web page than a mobile application
The cool thing about technologies like PhoneGap is that we can take HTML, CSS and JavaScript code, wrap it up in PhoneGap and then immediately we have an application that can run natively on iOS and Android. If you’re not implementing an appropriate mobile user interface though, with features that users have come to expect (i.e. smoothly scrolling lists, smooth animations between screens) then Apple may reject your application. If you have literally just wrapped up a website, and haven’t used a HTML5 mobile framework, Apple will definitely reject your application.
2. Your app is slow or unresponsive
HTML5 applications can be a bit slower than native applications. They’ve certainly come a long way, and a well designed HTML5 app will be just as fast as native, but if you’re not careful you could easily create an app that is slow or unresponsive. Having too many elements in the DOM, complex animations and styling or just a poorly thought out application structure can negatively affect the performance of your app. Common effects would include slow page load times and laggy scrolling lists. Apple is very protective of their brand, and want to ensure that if a user is using an application on an Apple device then it will be to a certain quality. Frameworks like Sencha Touch make it a lot easier to ensure a high degree of performance in a HTML5 mobile app.
3. You don’t handle online / offline states
It’s easy to design your application and forget to handle what actually happens if the user isn’t connected to the Internet. Switch your device into flight mode and run through your application – does it fail gracefully? If you’re loading services like the Google Maps API or loading data from a server then obviously you will require an Internet connection. In the event that these services can not be reached, you need to make sure that an appropriate error message is displayed to the user, and that your app doesn’t just break.
The Network Information plugin for PhoneGap comes in very handy here, we can use the following code:
var networkState = navigator.connection.type;
if (networkState != Connection.NONE && networkState != Connection.UNKNOWN) {
return true;
}to easily check if the user is connected to the Internet, and then perform different actions based on that.
4. Your app doesn’t scale to the appropriate resolution
It’s very important to test your application on different screen sizes. If you’ve designed it specifically to fit, say, the iPhone 5 resolution then Apple will reject your application when it doesn’t work properly on an iPad or a different model of iPhone. Again, Sencha Touch is pretty good in this regard. Applications created in Sencha Touch will automatically scale to any size, but you can also create specific profiles for different devices – so if you want to make use of the extra screen real estate when your app is running on an iPad you can do that.
5. You’re using a workaround that breaks the rules
Using the HTML5 + PhoneGap approach we don’t always have access to everything that a native iOS application has access to. It is possible to use plugins and work around these things though, just make sure you’re not breaking any rules like the following:
I spent a lot of time trying to work around this (without realising it wasn’t allowed) when I was developing RunTap. In the end I didn’t figure out how to do it anyway and used SoundCloud instead!
So, there’s some things to look out for. But there’s plenty of horror stories from the Apple Review queue – what’s yours?