Inflate gzipped JSON blobs in JavaScript with pako and WebWorker (worker-loader via Webpack)

BlobInflator.js

import { randomString } from './Helpers'
import BlobInflatorWorker from './BlobInflator.worker'

const worker = new BlobInflatorWorker()
const handlers = {}

worker.onmessage = function (e) {
  if (!e.data.error) {
    handlers[e.data.key].resolve(e.data.json)
  } else {
    handlers[e.data.key].reject(e.data.msg)
  }
}

export async function inflateBlob (blob) {
  const key = randomString()
  return new Promise((resolve, reject) => {
    handlers[key] = { resolve, reject }
    worker.postMessage({ key, blob })
  })
}

BlobInflator.worker.js

import pako from 'pako'

self.addEventListener('message', function ({ data: { key, blob } }) {
  const reader = new FileReader()
  reader.onload = e => {
    try {
      const json = JSON.parse(pako.inflate(e.target.result, { to: 'string' }))
      postMessage({ key, json })
    } catch (err) {
      postMessage({ error: true, msg: err.toString() })
    }
  }
  reader.readAsArrayBuffer(blob)
})

Helper.js

export function randomString () {
  return '$' + Math.random().toString(36).slice(2, 10)
}

Usage.js

import Vue from 'vue'
import VueResource from 'vue-resource'
import { inflateBlob } from './BlobInflator'

Vue.use(VueResource)

const resp = await Vue.http.get('test.json.gz', { responseType: 'blob' })
const json = await inflateBlob(await resp.blob())