News about Apple filing a patent for putting contact icons on the iPhone home screen surfaced in the blogosphere about a year ago. Almost at the same time an application called “Min Älskling” (“My Love”) appeared on the top charts of the Swedish App Store for $0.99. The only thing the My Love application did was simply to let the user choose a contact to which the application in itself became a shortcut for calling or texting. As I was considering a couple of small projects to use as an example for a post about iPhone web applications, the My Love application came to mind. This post summarizes the steps I took when implementing my version of the application as a web application, which I have dubbed Instacall.

Functionality

Since the concept is pretty basic, so is the functionality of Instacall. The sections below describe a couple of the functional and non-functional requirements I had in mind before I started adding layout and color to my thoughts.

Input phone number

The user will have to be able to input a phone number.

Note: Unfortunately, web applications are not allowed to retrieve contact information from the address book like native applications. Yet…

Dial and text

The user will have to be able to dial and send SMS to the given phone number.

Auto dial

The user will have to be able to choose whether the web application should automatically dial the given phone number as the user launches the application.

Bookmarking

The user will have to be informed about how to install the web application (i.e. adding Instacall as a bookmark to the iPhone home screen).

Note: A fortunate (and sometimes unfortunate) side-effect of making a web application is that the user is in control of the label that appears beneath the icon. In this case it is an advantage since this means the user can give it the same name as the contact they intend to use it for.

Fast loading

The application will have to load as quickly as possible (since the user will most certainly get frustrated at having to wait for the web application to load recourses when trying to make a phone call).

Visual design

Keeping in mind that the web application is aimed at rendering well on only one device (i.e. iPhone), the design is based on all the fun we get for free with the great CSS3 support Mobile Safari enforces. In this case: box-shadow (-webkit-box-shadow), text-shadow, -webkit-gradient, -webkit-animation and -webkit-transformation.

Implementation

I will not go into detail of how I realized the design with HTML and CSS, but the following sections describe some of the different techniques that I used to obtain a native application like behavior for Instacall.

Cache manifest

Web applications need to cache data to be able to work offline and have a speedy startup. As part of the working draft of the HTML5 specification comes the Offline Web applications cache manifest, which can be used for this purpose.

Reading the draft, W3C’s informs us that the browser needs instructions as to what recourses to cache. Roughly speaking, web developers need to perform three configurations.

html tag

The html tag has gotten a new type of attribute called “manifest”, the value of which needs to be a resource refering to a “.manifest” file.

.manifest file

A “x.manifest” file listing all the recourses that we want to cache. Please refer to W3C’s syntax documentation of the .manifest files.

MIME type

The server hosting the web application needs to provide the .manifest files with the correct MIME type (i.e. text/cache-manifest). If you are running an Apache server, you can add the following instruction to you .htaccess file “AddType text/cache-manifest .manifest”.

Instacalls cache manifest

I used this cache manifest for Instacall, which lists every resource I used throughout the web application.

CACHE MANIFEST
# html files
index.html
# js files
http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
js/jquery.bookmark_me-1.0.js
# css files
http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css
css/style.css
css/lib/reponsive_grid_system.css
#images
img/bg_bottom.jpg
img/bg_top.jpg
img/bookmark_me.png
img/close.png
img/instacall_logo.png
img/loader.png
img/icon.png

local-storage

The Web Storage specification is another interesting part of HTML5. As part of the specification comes the localStorage object. The localStorage object gives us the possibility through JavaScript to store key/value pairs. In Instacall, I used localStorage to:

• Store the phone number
• Wether the user choses to use instant dial on start up or not
• Remember if the user closed the “Bookmark me” bubble

To read more about how to use the localStorage object, check out this great tutorial by Nettut+.

iPhone link and meta tags

Apple initially had the intention of letting third party developers use HTML, CSS and JavaScript to create applications. Eventually, Apple decided to release the iPhone SDK in March 2008, and since then almost no living human being has successfully escaped the fact that the App Store now hosts more than 300,000+ applications for the iPhone (Source: Wikipedia.org). Fortunately, they left us a couple of features to make web applications more native-like with Mobile Safari.

Since Apple has done some great documentation of syntax and usage of these features, I will not bother you with another one of those useless post trying to interpret and cover these. But, I am going to share with you the ones I used for Instacall, and instead urge you to read Apples documentation.

apple-mobile-web-app-capable

This meta tag instructs Mobile Safari to run the web application in full-screen mode once the user bookmarked and opened it from the home screen.

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

apple-mobile-web-app-status-bar-style

This meta tag (when used together with apple-mobile-web-app-capable) instructs Mobile Safari which color the status bar should render in.

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

apple-touch-startup-image

This link tag exposes a resource for Mobile Safari to use as a splash screen when loading a web application from the home screen for going into full-screen mode.

<link rel="apple-touch-startup-image" href="image.jpg" />

Note: The image used must have a resolution of 320×460.

apple-touch-icon

This link tag exposes a resource for Mobile Safari to use as the web application bookmark icon.

<link rel="apple-touch-icon" href="image.jpg"/> 

Note: The image used must have a resolution of either 57×57 or 114×114 (the latter for retina display).

Demo

If you have an iPhone and want to test the end result, please use the following link: bit.ly/instacall (also found here).

Initially, I wanted to be able to trigger the SMS-app from Instacall, but I was met by an unexpected (yet unresolved) error, so I removed that functionality.

If you have any kind of feedback or input for improvements, just hit me back with an e-mail or via Twitter.