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
Compression Streams # dom-decompressionstream-decompressionstream |
Browser compatibility
BCD tables only load in the browser