Caching Binary Data With jQuery Ajax and IndexedDB

Ajax Logo

After long, grueling months (years? or does it only feel like years?), your web application nears completion. It is tightly coded, well documented, works across all modern browsers, and is well received by your beta testers. It’s nearly time to go live, and a smile of pure relief plays upon your lips… and freezes into a rictus grin when your client turns to you, and asks, "so, hey, can we speed up the dynamic cat pic loading? Especially when I close the browser and come back to it later. I think that’s really key to the whole application."

Long, long ago we discussed our jQuery plugin that will allow you to cache responses of ajax queries in Local Storage, so long as they’re strings, or something that can be coerced to a string (objects as JSON, numbers). We also previously discussed adding an ajax transport to allow us to handle sending and receiving binary blobs and array buffers via jQuery ajax.

But what if we need to cache binary blobs or arraybuffers? Say, we need those cat pics on the double – we could convert them to and from base64, but not only is that slow, but we’re certain to run up against the 5MB limit of local storage in short order. No, what we need is some way to cache binary data in some sort of client-side database…


Skipping the WebKit cache

Image of Elephants by Mylon Ollila on Unsplash

Caches in WebKit are tenacious. That’s problematic in an app that uses an embedded WebKit view when you’re trying to load your latest JavaScript or CSS changes without restarting the application. Chrome and Safari both provide developer tools for clearing and disabling caches, so I assumed it would be relatively straight-forward to implement a similar option in a custom app.

It was not. There are various methods that should disable or empty the caches, but at least in a Cocoa app with an embedded WebView running in OS X 10.8.5, most of them don’t work.


Ajax Caching, Transports Compatible with jQuery Deferred

Squirrel crawling down side of tree.

Ever since the advent of memcached and its ilk, the server-side has been able to benefit from reduced load by caching recently or oft-requested resources. This hasn’t become any less important and valuable. If anything, in this era of the webApp, when native application look and feel is increasingly desired, speedy response to requests is critical for your application to meet the needs of your time-pressed users.

Server-side caching can’t save us from the delay that making a roundtrip from the server imposes, however, and if you’re serving hundreds or thousands of users at the same time, even small memory-cached items may, to the user, seem to be taking their sweet time showing up. For small amounts of oft-requested data that isn’t likely to change often, we can eliminate even these delays by shifting the burden client-side, with local storage and ajax request caching.