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 responses to “iOS ‘native’ web apps with HTML5”
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?
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.