iOS ‘native’ web apps with HTML5

I’ve been considering iOS development recently but I don’t have a Mac on which to develop. Alternatively, I have been looking into HTML5 ‘native’ web apps. These are web apps that look and feel like native iOS applications.

I am using my Batch Image Resize web app for my R&D on this topic.

Installation

The web app can be installed via Safari’s ‘Add to Home Page’ feature.

It looks like a native App

As per the Apple Developer Guide, adding the elements below will allow the site to act like a native app when access from your iOS device.

‘apple-touch-icon’ defines the image to use for the icon.

‘apple-touch-startup-image’ defines the splash screen image.

The ‘apple-mobile-web-app-capable’ meta tag allows the page opened via your home screen to behave like a native app. When I open the ‘app’, I see it in full screen browser with no address bar at the top or any of the menus at the bottom.

<link rel="apple-touch-icon" href="/path/to/custom-icon.png"></link>
<link rel="apple-touch-icon-precompsed" href="/path/to/custom-icon.png"></link>
<link rel="apple-touch-startup-image" href="/path/to/startup-image.png"></link>
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Full Screen --></meta>

Reference

https://labs.ericsson.com/developer-community/blog/beyond-html5-audio-capture-web-browsers
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html

2 thoughts on “iOS ‘native’ web apps with HTML5”

  1. I just don’t know how to make my HTML5 app available for download, without that whole process to save the page. Is there a way to create a link that automatically saves the page on the mobile device?

    1. HTML5 offline apps download all necessary files for offline use via the manifest file. Here’s a good demo of offline HTML5 apps.

      My example page doesn’t do offline apps justice as it requires server-side processing for resizing the images. My focus was more about giving your website a native app feel.

Leave a Reply

Your email address will not be published. Required fields are marked *