iOS Safari Web Apps Templates and HowTos

August 14, 2012 | By

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 its 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.

I created templates that show the proper use of apple-mobile-web-app-capable, apple-touch-icon, apple-touch-startup-image and how to use them with everything from an iPhone 3Gs, iPhone 4/4s, 5, iPad 1, iPad 2, iPad Retina, etc.

You can find everything you need including working samples at https://github.com/gwilson/iOSWebAppTemplates

Updated October 28, 2013 for iPhone 5

Filed in: HTML5, iOS/iPhone/iPad, JavaScript, PhoneGap | Tags: , , , , , , , , ,

About the Author (Author Profile)

Greg is a developer advocate for the Google Cloud Platform based in San Francisco, California
  • http://none ivan molina

    nice work bro,.thanks.