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.
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.
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.
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.
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).
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.
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.
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.
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.
A “x.manifest” file listing all the recourses that we want to cache. Please refer to W3C’s syntax documentation of the .manifest files.
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.
- 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
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.
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.
This meta tag (when used together with apple-mobile-web-app-capable) instructs Mobile Safari which color the status bar should render in.
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.
Note: The image used must have a resolution of 320×460.
This link tag exposes a resource for Mobile Safari to use as the web application bookmark icon.
Note: The image used must have a resolution of either 57×57 or 114×114 (the latter for retina display).
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.