How a web application can download and store over 2GB without you even knowing it

I have been experimenting with the HTML5 offline application cache some more over the last few days, doing boundary tests in an attempt to learn more about browser behaviour in edge cases.

One of these experiments was testing the cache quota.

Two weeks ago, I blogged about generating and serving an offline application manifest using ASP.NET MVC. I reused that code to add hundreds of 7MB PDF files to the cache.

Warning: The HTML5 Data Attribute is case sensitive

I came across a nice little problem today. I wanted to use the HTML5 data attribute with jQuery. You can add any kind of data as attributes to any DOM element, using the prefix data-.

You can then use that data client side using JavaScript, which is handy for lots of different situations. Today I could not get this to work. My attribute was named so:

After a lot of frustration, the issue was resolved as caused by the upper case U in Url. The specification does not allow this, unless it follows a hyphen.

From the HTML5 specification you will see the following:

  1. For each content attribute on the element whose first five characters are the string “data-” and whose remaining characters (if any) do not include any characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z), add a name-value pair to list whose name is the attribute’s name with the first five characters removed and whose value is the attribute’s value.
  2. For each name on the list, for each U+002D HYPHEN-MINUS character (-) in the name that is followed by a character in the range U+0061 to U+007A (U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z), remove the U+002D HYPHEN-MINUS character (-) and replace the character that followed it by the same character converted to ASCII uppercase.

Here is an example: