An iOS web application uses HTML/CSS/JS to deliver a iOS experience that looks and behaves like a native iOS application. If done correctly, the user can't tell that it's not a "normal" app. Although the capabilities are limited, it can be a great solution for many apps where going through the normal iOS app store is overkill or not practical.
Creating iOS web apps can be very error prone. The size requirements for icons and splash screens are odd and there are a few things that are non-obvious (e.g. the iPad landscape splash image is actually a portrait-shaped image but has it's contents rotated; Retina displays reserve 40 pixels for the status bar while non-retina reserve 20 pixels, etc.). Also, if you screw something up, you get no errors. It just simply doesn't work leaving you to guess/hack.
What started as a 15 minute attempt to get icons and splash screens working for my web app resulted in a couple of hours of what felt like pure hacking. Many of the online resources (including Apple's!) were out of date and didn't include information on handling iPad retina icons/images. I decided to share my results to hopefully spare others from the frustrating experience. Proper use of apple-touch-icon and apple-touch-startup-image is demonstrated in these samples.
Fun facts:
- iPhones don't need a landscape splash screen. The apps always display a portrait splash image regardless of orientation. The app itself will turn landscape as expected, but it always launches as portrait.
- The iPad landscape splash screen is a weird thing -- it actually requires a portrait-shaped image with rotated content so if you view it in any image viewer, it will appear 90 degrees rotated. (see the sample images in the repo)
- My examples use square images and allow the device to add the rounded corners and the lighting highlights. I think it looks far better than any attempt I would make. See the Apple docs on configuring web apps for information on how to precompose your icon's rounded corners and reflections.
You can test webapp1 by pointing your iOS Safari browser to http://gregsramblings.com/webapp1, click the share button and select "Add to Home Screen". You should see the icon and you should see splash screens when you launch it.
This is the same as webapp1 but adds Matteo Spinelli's "add to home" script functionality that prompts the user to add the web app to their home screen with simple and clear instructions. See http://cubiq.org/add-to-home-screen for the latest script, docs and other information.You can test webapp2 by pointing your iOS Safari browser to http://gregsramblings.com/webapp2 - you should see a popup that points to the share button explaining how to add the app to the home screen.
more coming soon including offline support
Blog - http://gregsramblings.comTwitter - @gregsramblings