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