Mobile Safari 10 IndexedDB Blobs

Ran across the same problem. Chrome 54 and Safari 10 work fine on desktop, but on Mobile Safari I kept getting the Unknown error when trying to store a Blob into IndexedDB. I can confirm that this really is just an issue with Blobs on Mobile Safari, and not some misuse of the API.

Fortunately, ArrayBuffers work fine. So I instead downloaded the images like:

xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';

Then saved them into IndexedDB as ArrayBuffers, and converted them to Blobs after pulling them out to get a url:

putRequest = objectStore.put(arrayBuffer, id);
putRequest.onsuccess = function(event) {
  objectStore.get(id).onsuccess = function(event) {
    var blob = new Blob([event.target.result], { type: 'image/jpeg'});
    var URL = window.URL || window.webkitURL;
    blobUrl = URL.createObjectURL(blob);
  };
};

I'd rather not have to convert ArrayBuffers to Blobs like this as I assume there is a performance penalty. But it works.