title: In-browser gzip decompression using HTML5 Blob API and createObjectURL?
body: <p>I am investigating an idea to make use of the browsers built in gzip decompression facility by using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob" rel="nofollow noreferrer">HTML5 Blob API</a>. With a trick the browser may do the uncompressing when the Blob is referenced as an Object URL via <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL" rel="nofollow noreferrer">URL.createObjectURL</a> and then inserted into the DOM. It appears that the only obstacle is the ability to set Content-Encoding for the blob.</p>
  
  <p>If it would be possible to set the content-encoding of the Blob Object to gzip the browser will decompress the Blob and it will be possible to return the result to a library or application. If this would be possible, it may result in a stable and fast decompressing solution that costs just a few bytes instead of for example 22.6kb for pako_inflate.min.js.</p>
  
  <p>I hereby want to inform if anyone knows of a solution to use a javascript Blob to uncompress gzip data in the browser.</p>
  
  <p>The code that I use to test via the browser console is the following. It will change the background of a page to green on success.</p>
  
  <pre><code>    /* create blob */
      var createBlobUrl = function(fileData,mimeType) {
          var blob;
  
          // Create blob
          try {
              blob = new Blob([fileData], {type: mimeType});
          } catch (e) { // Backwards-compatibility
              window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
              blob = new BlobBuilder();
              blob.append(fileData);
              blob = blob.getBlob(mimeType);
          }
          return URL.createObjectURL(blob);
      };
  
      /* CSS: body, * { background:green; } */
      var zip = window.atob('H4sIAAAAAAAA/0vKT6nUUdBSqFZISkzOTi/KL81LsUovSk3Ns1aoBQCLj6wTHQAAAA==');
  
      function str2bytes (str) {
          var bytes = new Uint8Array(str.length);
          for (var i=0; i&lt;str.length; i++) {
              bytes[i] = str.charCodeAt(i);
          }
          return bytes;
      }
      var bloburl = createBlobUrl(str2bytes(zip),'text/css');
      var link = document.createElement('link');
      link.setAttribute('rel','stylesheet');
      link.setAttribute('type','text/css');
      link.setAttribute('href',bloburl);
      document.head.appendChild(link);
  </code></pre>