JavaScript Asset Package

Recently, I've been putting a considerable amount of time into delivery strategies for HTML5 applications. Current browser support for manifest files makes it possible to run apps in offline mode, but also can produce weird caching behavior if you update part of your payload when the app resumes online operation. This is very important for apps in mobile browsers where suspend/resume behavior may mean significant clock skew in your running application.

One of the strategies that is paying off in this arena is bundling everything inside of JavaScript files. All of the presentation logic, layout, format, and content gets bundled into a single .jap file. With gzip compression enabled, and base64 encoding all of the sprites and sounds, this packing only adds about 2-3% overhead to the payload. But when you consider that this can reduce the number of connections made from N to 1, you can actually have a net bandwidth savings from not sending HTTP headers. If you say have a 4k of headers (due to cookies etc) sent on every request, and you add 2% to 20 thumbnails that are each 8k, you add 160 bytes per thumbnail 3.2k total, but save 80k. In a mobile environment where latencies are often in the 1-6s range, you also have the added bonus of paying that cost just once.

One thing to make this work properly is a client capable of bundling requests and parsing the data out of the .jap file. My current best efforts for Phos put this somewhere around 20-30 lines of code. This means I can easily embed this and the directive for what payloads to load in a data: URL which can be used as the data