Archive for the ‘Mobile Web Development’ Category

HTML5 and Browser Caching: Part 3

February 17, 2011 1 comment

Part 3: Web Storage

In this final part we cover HTML5 Web Storage which is essentially key/value pairs.

You add data into the store using the key, which is a String, and then retrieve the data by using the same string. The data stored in the value field can be any object supported by Javascript but is actually stored in String format.

Good Bits

  • Simple to Use: There’s a variety of ways to access the key/value store, you can use:

localStorage.setItem(“myKey”, myObj)

functions or use square bracket notation:

var myObj = localStorage[“myKey”]
localStorage[“myKey”] = myObj

This makes it easy to pick up and use for simple tasks.

  • Event Support: In order to keep track of changes to the store, you can make use of the storage event.  This is fired on the window when ever the setItem(), removeItem(), or clear() functions are called and the result is the store is changed. If these functions don’t change the store no event is fired. This can help with tasks such as logging.
  • Browser Support: Web Storage is supported by most widely used desktop and mobile browsers (with the exception of Opera mini/mobile).  See the supported list.

Bad Bits

  • Storing Strings: When using Web Storage you’re storing strings, not data in its original format. In the case that you want to store a lot of integers or floats, the difference in representation can really add up. Each digit in that integer is being stored as a character, not in the usual representation of an int. This naturally means the same data can take up a lot more space.
  • Fixed Size Storage: The standard storage size provided by most browsers is 5MB. Unlike Web SQL Database if you need more space you can’t request more.  Instead if you exceed the limit a QUOTA_EXCEEDED_ERR is thrown. Some browsers (including Opera) allow the user to configure the amount of storage space provided within their settings, however this is not something that the developer has any control over so can’t practically be made use of.

HTML5 and Browser Caching: Part 2

February 17, 2011 4 comments

Part 2: Web SQL Database

Web SQL Database is essentially a local implementation of SQLLite inside your browser. It can be queried using SQL, and offers a lot more functionality than the simple key-value store that Web Storage provides.  There also seems to be a difference in the way browsers handle it.

Good Bits

  • Transactions & Queries: Being a database you can setup a schema, and query the data easily.  Web SQL also supports transactions, meaning that you can setup tranactions that contain one or more SQL statements. You are then able to rollback the transaction if any of the statements fails (either the SQL or the code in the transaction), so any changes are never committed.
  • Variable Size: The default size for the database in most browsers is 5MB.  However when you setup the database (and also it seems when extra items are stored) you can request extra space. This usually prompts the user with a dialogue box asking if they want to allow this.  This is an advantage over for example using Web Storage as it means that it is often possible to store more than 5MB of data.

Bad Bits

  • Browser Support: The API for Web SQL Database is not supported by most desktop browsers (including FireFox and IE)  See a useful list.  Also they do not plan to introduce support.  This is because the specification is no longer being maintained and it looks likely that the IndexedDB standard will take it’s place in future versions, and will be far more widely supported.   IndexedDB isn’t currently any supported for this generation of browsers so is not practical to develop for at the moment. For this reason we have chosen to use Web SQL in our mobile application, with a view to replacing this code with the IndexedDB API once this is widely supported.
  • Versioning: The implementation of versioning seems a bit odd. You need to know the database version number before you are able to connect to an already existing database, however without being able to connect to a users database you can’t find out what version they are using.  This obviously makes things a little difficult when you are trying to upgrade to a newer version, with a different schema.

Using Web SQL Database:

If you are interested in getting your feet wet there’s a great article on how to use Web SQL Database at HTML5 Doctor .  It covers creating and connecting to a database, querying and dealing with the results, and also has some nice demos.

HTML5 and Browser Caching: Part 1

December 2, 2010 1 comment

HTML5 brings us three flavours of local browser side caching to investigate:

Part 1: Application Cache

Application Cache uses the manifest file to store a list of resources that you want to cache locally on the users browser.

The cache is updated when the manifest file is changed, independent of whether or not the resources it references have changed. For this reason the manifest file includes a version comment which can be updated to force a refresh.

The includes within the manifest file the ability to fallback to a specified alternative resource should the specified one be unavailable.

Apache Configuration

The apache  used will need to be reconfigured to allow the correct mime type to be
returned for manifest files used. For example:

AddType text/cache-manifest .manifest

Would mean that all files that end in .manifest would return the cache-manifest mime type. It also needs a change to prevent the apache itself from caching the manifest file, causing problems when debugging as changes are not picked up.

# Prevent the manifest file from being cached
<Files ~ “^\.*.manifest”>
ExpiresActive On
ExpiresDefault “access”

This marks any files ending in .manifest as expired in the apache cached so they are fetched from the server every time. This is important to ensure that when you change the manifest file these changes are picked up by the application so it can make the correct decision about updating the other resources.


If the manifest file or a resource specified in it fails to download, the entire cache update process fails. The browser will keep using the old application cache in the event of failure.
The HTML file that references the manifest file is automatically cached, so any changes to it will require an update to the manifest file to be picked up.

Useful Resources

Dive into HTML5 –

Toolbar for Firefox to clear your Application Cache –

When can I use… Support for HTML5, CSS3, etc

December 2, 2010 Leave a comment

For anyone wondering what support the most popular browsers offer for HTML5, CSS3, SVG etc on mobile and desktop versions take a look at:

Show the past current and future compatibility for ie,Firefox, Safari, Chrome, Opera, iOS, Opera Mini, Opera Mobile, Android Browser.