Compression Streams API を使用したブラウザでの圧縮と解凍

独自の圧縮ライブラリや解凍ライブラリを用意する必要がない、小規模なウェブアプリを作成する

Compression Streams API は、gzip または deflate(または deflate-raw)形式を使用してデータ ストリームの圧縮と解凍を行います。

組み込みの圧縮 JavaScript アプリケーションでは、圧縮ライブラリを含める必要がないため、アプリケーションのダウンロード サイズが小さくなります。この便利な API が Stable Chrome と Safari Technology Preview でサポートされるようになりました。データを圧縮する方法を以下に示します。

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

解凍するには、解凍ストリームで圧縮ストリームをパイプします。

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

デモ

ブラウザ サポート

Compression Streams API は、Chromium 80 と Safari Technology Preview 152 からサポートされています。 その他のブラウザの場合は、CanIUse を確認します。

謝辞

Matt ArtzUnsplash より)のヒーロー画像