Nearly Native Web Applications for iOS

It all started when I first saw the  Kindle Cloud Reader.  It’s the Amazon Kindle web app for iPad that allows access to your ebook library from any web browser – notably including mobile browsers.

 

I was surprised by how “native-like” it looked and behaved.  I thought I noticed some differences in load time, but it was nearly indistinguishable from the native experience.

If you haven’t seen it already, check it out at read.amazon.com.  All I had to do was visit the site and on iOS, hit the “Share” icon in Mobile Safari to Add to Home Screen.  This placed a Kindle launch icon on the iPad/iPhone desktop and the app subsequently ran full screen without displaying the browser chrome (address bar, navigation buttons, etc)

Safari Web Content Guide: Configuring Web Applications

Simple as that!

Here’s how it works.  Simply add iOS specific tags in the <head> section of the HTML.  Samples:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

I’ve even successfully added splash screens like this:

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

This further blurs the line between native and hybrid apps.  Sure – I’ll still use Phonegap to access native features, but for iOS, this is a easy and useful.  I’m surprised that this is not more frequently used for mobile and responsive web sites/apps.

Safari Web Content Guide: Configuring Web Applications.

Nearly Native Web Applications for iOS

Leave a Reply

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