How to build native-looking apps for iOS using HTML

Placed in: Home

Build native-looking apps for iOS

Lately, I've been messing around with cool HTML5 stuff a lot. One of the things that HTML5 is trying to reach, is the market of mobile devices. A long time ago (when I got my first iPhone), I wrote an article on how to add a webclip for easy access to your website. But since then, I've learned a couple of more things on how to build native-looking apps for iOS using only HTML.

I've created a template/boilerplate that you can use for your next project to create native looking apps for iOS (more specifically: Mobile Safari) using nothing but HTML. Simply build your website starting with this template, bookmark it and you're done.

View or download the source code and read the comments carefully to see what's needed to create a native looking app using only HTML.

If you don't feel like fully digging into the source, but learn the pieces bit by bit, feel free to read on further. Take note that this will only work when the user bookmarks your webpage. The changes to any existing projects can be made easily, just make the following changes in the head section of your page and you're ready to go!

Set the viewport

First, we'll need to provide the browser more information about how the webpage should be displayed. This will ensure the application is rendered properly and not scaled when rotating/zooming. To do this, we need to set the viewport property to a 1.0 scale and prevent the user from scaling anymore.

 
<meta name="viewport" content="width=device-width;
    initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

You'll have to keep in mind that your user can now not scale anything on your site anymore. Make your font/links/buttons etc. big enough for him to actually read or press.

Make it fullscreen

Sadly, you can't make a HTML application go truly fullscreen (something which a native application can do). You can almost achieve this effect by hiding the browser URL bar (top) and the navigation bar (bottom). Both so-called Safari-bars can be hidden using the following code:

 
<meta name="apple-mobile-web-app-capable" content="yes" />

Pretty cool! When you now bookmark the page, it'll (almost) not look like as if you're visiting a website, but using a real app. But there's more we can do!

Change the status bar style

With HTML, you even get the power to change the status bar style of the iOS device. The status bar is the bar totally on top of the device, which is always visible and contains information about your carrier, battery life etc. We can change this by adding the following line:

 
<meta name="apple-mobile-web-app-status-bar-style"
    content="black-translucent" />

Valid values for content are: default (white), black and black-translucent. If set to default or black, the content is displayed below the status bar. If set to black-translucent, the content is displayed under the bar.

Add a Home icon

The Home icon (also known as webclip, Springboard icon or Apple Touch Icon) can also be controlled using HTML. This is the kind of icon will see on their home screen in order to start the application. It's pretty easy to create one yourself, but there are a couple of things you have to keep in mind.

By default, Mobile Safari searches for a file named apple-touch-icon.png in the root directory of your website. If it can't find any image there, you can specify it using the code below. Make sure the image has a dimension of 114x114 and is a PNG file. The glossy finish and resizing for the different devices will be done automatically.

 
<link rel="apple-touch-icon"
    href="images/apple-touch-icon.png" />

Using my template, the result will look like this:

If you don't want the glossy finish, use apple-touch-icon-precomposed instead of apple-touch-icon. The result will look like this:

That looks great for making your app look even more like a native app. But, we can do even more stuff.

Add a startup image

You can even add a startup image (also known as a splash screen) to your HTML application, to show to the user while the application loads. This is the one that I'm using in my template:

Take note this file exactly needs to be 320x460 for iPhone/iPod or 1004x768 for iPad, and is a PNG file. Also, this only works if apple-mobile-web-app-capable is set to yes.

Block rubber banding

Rubber banding (also known as elastic scroll) is the effect you see when you pull down/push up the page, see a grey area (which indicates the bottom of the page) and flicks back. In most native applications, this is something you don't see and that's why we want to prevent it. Take note, by using this code, the user can't scroll on your page anymore.

 
<head>
 
    <script>
    function BlockElasticScroll(event) {
        event.preventDefault();
    }
    </script>
 
</head>
<body ontouchmove="BlockElasticScroll(event);">
 
</body>

Sadly, this solution isn't fully waterproof (sometimes, it doesn't work). For a more solid solution, check out ScrollFix.

Javascript

In JavaScript, you can use window.navigator.standalone boolean to detect wether the page is being viewed on your website, or as a standalone application. Use the following booleans to check which device the user is using:

 
var isIPhone = navigator.userAgent.indexOf("iPhone") != -1 ;
var isIPod = navigator.userAgent.indexOf("iPod") != -1 ;
var isIPad = navigator.userAgent.indexOf("iPad") != -1 ;
var isIOs = isIPhone || isIPod || isIPad ;

Conclusion

This template can really help you make your HTML app give a more native app iOS look and feel. It's great that the same code works for the iPhone/iPod (only the iPad has some sizing issues with the startup image). You can use JavaScript to give feedback to the user that they should bookmark your application once they visit your website to get the whole experience!

Later on, you could add a manifest file to take your application offline to use your application even when you don't have an active internet connection! I might cover that in another tutorial later.

Did I miss anything? Do you have more tips you want to share? Feel free to do!