Tag Archive for html5

Developing a Cross-Platform HTML5 Offline App – Part 1

Update 2014-02-25

Help request!

Hey folks.  I seem to get a fair amount of traffic to this page from Stack Overflow.  This is great, except that I haven’t updated this post in 3 years, so the data is woefully out of date.  It would be nice if developers that came here looking for this data weren’t given Firefox 4 Beta stats.  So if you’ve tested a current browser’s offline storage limit, post it as a comment and I’ll add it to the table.  If you want to help but don’t know how to test this, let me know.  If I get enough requests / find some time I’ll put together a testing page.

HTML5 Powered with CSS3 / Styling, Multimedia, and Offline & StorageI’ve been working on an HTML5 offline app for just over a year now.  Yes, the same app.  It hasn’t been dedicated time, but the development has dragged on for awhile now.  Primarily this has been due to the production of data (there’s a lot of data), though many delays have been caused by the developing spec and its idiosyncrasies across browsers.  So, I decided to write a multi-part series in what it’s taken to get this app out the door (which it isn’t yet, but by the time I finish this series it should be).

When all is said and done, this app should run on Windows, OS X (Mac), Linux, iOS (iPhone/iPad/iPod Touch) and Android.

This first part is just an introduction to what’s involved and will mostly be fluff.  The meat of it won’t start until part 2.

Canvas First Thoughts

HTML5I hate Flash.

Shockwave was cool when it first came out. And those stickman ninja spy animations were fantastic when Flash was first released. But overall it’s been abused. Whenever I see a Flash nav menu I die a little inside, no matter how fancy it is. So I was super excited when I started reading/hearing about HTML5 Canvas.

Dynamic Cache Manifest

HTML5In developing an HTML5 offline app, a cache manifest is required in order to tell the app which files to cache.  If a file changes, the manifest file needs to be changed as well.  If a file is added, it needs to be added to the manifest.  During the development process this can be quite a PITA.

Enter the dynamic cache manifest.  Not only does this handle all the file adds/deletes, but it also handles changed files as it generates an MD5 hash of all files which it stores in the manifest file.  So if the hash changes, the manifest changes.