Javascript gzip decompress in browser

I feel that there should be a way to use the browser's native functionality to un-gzip. If I am wrong can someone explain why this browser functionality is not exposed as a javascript API?

No, there shouldn't be, unless it is in w3c standard and it is not. The only standard which says something about gzip compression is an HTTP standard.

I really believe it won't become standard because there are thousands of algorithms (for compression, encryption, etc.) which you may want to use and browsers cannot handle them all; it would also be unfair to create interfaces for one algorithm while not creating them for another.

HTTP protocol is a kind of exception. The compression here is done to make the life of millions of people easier. The HTTP is a bottle neck in web performance, so as long as the compression is available there I cannot imagine any case when you elsewhere need to use a compression in JavaScript. The only case I know is compressing items in a localStorage / indexedDB, but even there gzip won't work because it is not producing UTF-16 output.

That is why this is not in the standard and this is why it most likely won't appear there.

Your particular case is a server side implementation error. Using compressed output without a proper header really smells. Either don't use the compression or do it right.

And is there a way to un-gzip a file in javascript without adding an additional library?

Actually other than that there is a possible solution: create a browser extension which injects a proper header in a server response and you won't need a library but will need to distribute the extension to the users. Could be even worse, but still may work.

Write smaller web apps that don't need to ship their own compression or decompression library

Published on Monday, August 29, 2022

The Compression Streams API is for compressing and decompressing streams of data using the gzip or deflate (or deflate-raw) formats.

With built in compression JavaScript applications do not need to include a compression library, making the download size of the application smaller. Stable Chrome and Safari Technology Preview now support this useful API. Compressing data is shown below.

const readableStream = await fetch('lorem.txt').then(
(response) => response.body
);
const compressedReadableStream = readableStream.pipeThrough(
new CompressionStream('gzip')
);

To decompress, pipe a compressed stream through the decompression stream.

const decompressedReadableStream = compressedReadableStream.pipeThrough(
new DecompressionStream('gzip')
);

Demo

Browser support

The Compression Streams API is supported from Chromium 80 and Safari Technology Preview 152. For other browsers, check CanIUse.

Acknowledgements

Hero image by Matt Artz on Unsplash.

Last updated: Monday, August 29, 2022 Improve article

The DecompressionStream() constructor creates a new DecompressionStream object which decompresses a stream of data.

Syntax

new DecompressionStream(format)

Parameters

format

One of the following compression formats:

  • "gzip"
  • "deflate"
  • "deflate-raw"

Exceptions

TypeError

Thrown if the format passed to the constructor is not supported.

Examples

In this example a blob is decompressed using gzip compression.

const ds = new DecompressionStream('gzip');
const decompressedStream = blob.stream().pipeThrough(ds);

Specifications

Specification
Compression Streams
# dom-decompressionstream-decompressionstream

Browser compatibility

BCD tables only load in the browser

Does browser decompress gzip?

If the gzip compression is enabled on the web server, that is, not in the application logic, then the browser will uncompress automatically.

Do any browsers not support gzip?

gzip compression This HTTP header is supported in effectively all browsers.

How does browser gzip work?

Using gzip on the Web When a browser with gzip support sends a request, it adds “gzip” to its Accept-Encoding header. When the web server receives the request, it generates the response as normal, then checks the Accept-Encoding header to determine how to encode the response.

How do I gzip a JavaScript file?

htaccess file. Then load an html or js file via the server and check the headers for "Content-Encoding", if it says gzip or deflate, it is enabled. You need access to your vhost/server config to globally enable compression. You don't need to prepare your files, they're compressed automatically on request.