Friday, February 7, 2014

zip.js: Exactly What It Sounds Like (Awesome)

Originally written for eImagine Technology Group and posted at

Transferring data back and forth between a web service and a mobile application can be a real chore at times. For textual data, XML and JSON representations provide fast and highly-debuggable encapsulations of the data, but binary data continues to be a real pain at times; you must make choices on whether the data will be downloaded using file requests, present it as binary streams, encode it using Base64 and so on. It is with that in mind I share a brief story and a cool script that might help you out.

The Story
On a recent project I was faced with finding a clean method for taking whole directories of binary files (images, text, etc) and packaging it in such a way that it could be efficiently synchornized to a client mobile device while using as little bandwidth as possible. Once on the client device, the files would then need to be cached so as to enable offline/disconnected operation - a solid move for any mobile application since you can never guarantee connectivity or, at a minimum, the service level.

While kicking around ideas for this, I realized that if I were doing this in a single instance for my own purposes, I would have asked the person on the other end to "zip up" the files into a zip archive and send me the file. Perhaps, as an alternative, they could drop it out on a server somehwere for me to grab whenever I wanted. This would compress the contents of the package (the files) and maintain the directory structure so I would replicate the intended layout when I expanded the package.

I was using PhoneGap for wrapping an HTML5 mobile application and publishing it on various devices. In order for this same mechanism to be a goof fit for me, I would need to either use a plugin (which I prefer not to use as it adds a bit of complexity in upkeep) or find a then-unkown JavaScript implementation of the zip inflate/deflate mechanism that would also allow me to instantiate the files to the local file system in the application sandbox. As you have likely guessed, the latter turned out to be the route we took.

The Library
After doing some of my favorite detective work (Google, Scan, Repeat) I discovered a library available on GitHub that had gotten some attention from other users. Zip.js is a rather small JavaScript library that, once added, did everything I needeed. On the server side, I was able to let my web service grab pre-packaged zip files (depending on what was needed by the client), pull them down using the FileTransfer class, and then deflate them into protected/isolated storage on the client device. What's more, this even works in-browser using the likes of Chrome by asking the user if they are willing to partition a small block of space for the application.

The documentation ( is rather limited, but a little playing around mixed with the sparse examples will lead you in the right direction. Within a few minutes I was able to take a test zip file and pull it from my dev server and process it into the isolated storage, reconstituting it just as it should be. This presents a great way to push file deltas of overarching applications to clients and keep everyone on the same page.

Where To Get It
If you are comfortable with GitHub (or at least the Git system in general), clone the repository down to your local computer from If, however, you would rather just download the zip archive (ah, the relevance!) then you can grab it at Don't forget to check out the aforementioned documentation (or you will be really lost).

As always, feel free to hit me up with any specific questions as I am happy to help out!

No comments:

Voice Comments