Fetching zipped text file and unzipping in client browsers, feasible in Javascript?

Question

I am developing a web page containing Javascript. This js uses static string data (about 1-2 MB) which is stored in a flat file. I could compress it with gzip or any other algorithm to reduce the transfer load.

Would it be possible to fetch this binary file with Ajax and decompress it into a string (which I could split later) in the client browser. If yes, how can I achieve this? Does anyone have a code example?

Solution 1

And another library or site is this one, although it has few examples it has some thorough test cases that can be seen.

https://github.com/imaya/zlib.js

Here are some of the complex test cases https://github.com/imaya/zlib.js/blob/master/test/browser-test.js https://github.com/imaya/zlib.js/blob/master/test/browser-plain-test.js

The code example seems very compact. Just these two lines of code...

// compressed = Array.<number> or Uint8Array
var gunzip = new Zlib.Gunzip(compressed);
var plain = gunzip.decompress();

If you look here https://github.com/imaya/zlib.js/blob/master/bin/gunzip.min.js you see they have the packed js file you will need to include. You might need to include one or two of the others in https://github.com/imaya/zlib.js/blob/master/bin.

In any event get those files into your page and then feed the GUnzip objects your pre-gzipped data from the server and then it will be as expected.

You will need to download the data and get it into an array yourself using other functions. I do not think they include that support.

So try these examples of download from https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data

function load_binary_resource(url) {
  var req = new XMLHttpRequest();
  req.open('GET', url, false);
  req.overrideMimeType('text\/plain; charset=x-user-defined');
  req.send(null);
  if (req.status != 200) return '';
  return req.responseText;
}

// Each byte is now encoded in a 2 byte string character. Just AND it with 0xFF to get the actual byte and then feed that to GUnzip...
var filestream = load_binary_resource(url);
var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)

===================================== Also there is Node.js

Question is similar to Simplest way to download and unzip files in Node.js cross-platform?

There is this example code at nodejs documentation. I do not know how much more specific it gets than that... http://nodejs.org/api/zlib.html

Solution 2

Just enable the Gzip compression on your Apache and everything will be automatically done.

Probably you will have to store the string in a .js file as a json and enable gzip for js mime type.

Solution 3

I remember that I used js-deflate for off-linne JS app with large databases (needed due to limitations of local storage) and worked perfectly. It depends on js-base64.

Comments

[Joseph]

Can you specify what file is it? A more proper approach might be suggested if the type of file was known.

[Nathan Stretch]

I know you mentioned you can't access server config, but can you execute server-side scripts? PHP for example? If so, instead of requesting the file directly, you could request a php script, which would set the Content-Encoding: gzip header and then output the gzipped version of the file.

[Jérôme Verstrynge]

Nathan, great suggestion, I did not think about it. Indeed I can access PHP...

[Jérôme Verstrynge]

I know about this option, but unfortunately, this cannot be enabled. I don't have access to the server.

[Matthias]

blog.another-d-mention.ro/programming/…

[Sean Hogan]

Move to a different web-host. You're going to spend more time working around your current host's limitations than you will searching for for one that properly suits your needs.