iPhone and HTML5 Experimentations
After my trusty mobile phone which I have had for the last 4 years gave up the go on me I decided to replace it with a shiny iPhone.
For the most part its been a very good experience, however there where a few things that my old phone did slightly better like running multiple applications at the same time, letting you choose your own SMS ringtone (rather than limiting you to only 6!) and my biggest annoyance:
When composing a new text message every phone I owned in past told you how many characters you have left (before it starts sending multiple messages) and how many messages it was going to send in total.
This crucial feature surprisingly seems to have been left out on the iPhone! Which could leave me accidentally wasting my credit by sending 2 messages at once and annoying people with 2 messages (when I go over the 160 character limit). As the iPhone has one of the most advanced web browsers Safari built-in (with copy and paste support) I set out to try and fix it myself.
My solution: http://www.sebflipper.co.uk/iPhoneSMS (best viewed on an iPhone)
Update: Source is now available on GitHub
Using a bit of HTML and JavaScript I quickly knocked up a proof of concept, but it didn’t look too pretty. So to spice things up I decided to have a look at what new HTML5 features I could use and being a developer I wanted to create a kinda “Hello World” HTML5 application.
My JavaScript ingredients:
- IUI – a JavaScript library for creating iPhoneish interfaces in a web page
- jQuery – a well used JavaScript library for simplifying common tasks
New HTML5 features I wanted to try out:
- Storing files for offline usage (allowing you view the web app when you have poor or no network coverage)
- Using SQLite for offline databases
- Geolocation using the iPhones built-in A-GPS
Storing files for offline usage
This bits quite easy and involves creating a file called: "<app-name>.manifest" this contains a list of files that you want the browser to download and store for offline usage, one thing to note when the server sends this manifest file it needs send the header: text/cache-manifest which can be added as a .htaccess file (if your using Apache) via:
AddType text/cache-manifest .manifestThen in your index file add the following HTML5 tag before the head tag like:
<!doctype html>
<html manifest="sms.manifest">
<head>
Using SQLite for offline databases
This bit is a bit more complex and requires knowledge of SQL/SQLite, but it essentially uses JavaScript to create a new database object and run any initial SQL commands to setup the table structure. For a better example see the db.js file which shows database support detection and creating the table structure then see the $('#save').click function in sms.js on how to insert and delete rows.
Geolocation
HTML5 adds a new set of JavaScript calls that can be used to get the computers or devices location (by getting the longitude and latitude based on a GPS fix, or cellular network triangulation or by using your IP address and a database of WiFi networks and their locations). For a better example see: Merge Design on Geolocation or geolocation.js
Fall Back
By default all the buttons for accessing the database and geolocation features are not displayed, however there are a few JavaScript checks to see if the browser supports these features and if it does it will display the appropriate buttons, see db.js and geolocation.js (search for supportsDbs and supportsGeolocation)
The result: http://www.sebflipper.co.uk/iPhoneSMS (best viewed on an iPhone)
