Summary
What I'm trying to do is pretty simple:
- 1a. If the image is not a local storage of any type (for example, IndexedDB), read the image as an array of bytes from the server, put it in local storage (as a byte array or a file link, I don’t care)
- 1b. If the image is in local storage, read the byte array from local storage. Show this byte array as an image on the html page.
Somehow, between Blobs, objectURLs, indexedDB, and caching, all of this has become too complicated and exhibits strange behavior. If there was a way to bind ArrayBuffer directly to the image, and not first convert to Blob and then ObjectURL, then I will probably go with it, because it is simpler and gets rid of problematic Blobs and a few unnecessary steps.
If you want to see sample thread code , look at this jsfiddle . Please note that, as described below, the problem does not occur in the jsfiddle example (for some reason I can not understand).
There is a reason why I use IndexedDB instead of relying on browser caching, so let's try to avoid this discussion and have nothing to do with the fact that IndexedDB seems to behave badly in Chrome.
I am wondering if someone else has met something similar or some suggestions on how to improve the situation.
More details
Chrome version 38.0.2125.104 m.
Basically, the thread should check if blob is in IndexedDB by index (see jsfiddle for reference):
- 1a. If this is not the case, extract the blob from the server (
xhr.open ), put the blob in IndexedDB ( objectStore.put ) and show blob ( imgSrc = createTheObjectUrl(blob) ). - 1b. If so, then extract the blob from IndexedDB (
objectStore.get ), create a URL from blob, set the src image to the URL.
The problem is that it works initially, but after a while (sometimes when I refresh the page, sometimes when I close Chrome and return to the web page), I get 404 (not found) when accessing the blot url.
Several things can be noted: -
- In my limited tests with other browsers, I do not see the same behavior - it seems that other browsers are working fine.
- When I look at the blob-internalals page (chrome: // blob-internals), there is a blob path on my disk. When it works (the image is visible), this file exists, when it starts to crash (404 Not Found), that the file does not exist (although blob-internal still refers to it).
- When I tried to reproduce this in jsfiddle , the problem does not occur. This is cutting and pasting from my code. Unfortunately, I do not have a public version of this web server, so I can not show that it does not work.
Given that jsfiddle always works, all I can think of is that there is something else in my server setup. I looked at the difference in the returned headers, and I see that in the case of jsfiddle, caching is enabled. So, I started to think that this has something to do with caching (which could be a completely wrong assumption). It’s as if Chrome is tracking blob usage and removing it from the file system as soon as it goes out of scope, which leads to writing to IndexedDB without a file (which in itself seems to be an error). I don’t want to enable caching on the server or the blob service life depends on the settings of the server cache.
Bypass
As a workaround, I did the following: -
- 1a. If the image is not specified in IndexedDB, then extract it as a Blob from the server. Convert Blob to ArrayBuffer. Store in IndexedDB as ArrayBuffer.
- 1b. If the image is in IndexedDB, then extract, convert ArrayBuffer to Blob, create a URL from Blob, set the src image to URL.
This is not ideal, as it means that I have the additional overhead of reading the array of buffers from the blob when I first display the image (before it is stored in IndexedDB), and then I have the overhead of reading the ArrayBuffer in blob when retrieving from IndexedDB. Perhaps some reasonable shared resource is occurring, which means that they use the same base buffer, but that means that it depends on the implementation for performance.
There is more - if I create a new Blob from Blob, which is returned by the server or creates an ArrayBuffer from Blob, then the new Blob from ArrayBuffer still does not work. As if using some kind of shared resource counted by reference. That is - any workaround that I can think of about this is that saving blob in IndexedDB does not work.