Downloading tiles on Google Chrome net::ERR_INSUFFICIENT_RESOURCES about leaflet.offline HOT 6 CLOSED

First guess:

It is related to #41

More info:
https://stackoverflow.com/questions/24122506/neterr-insufficient-resources-error-when-adding-numerous-img-elements-to-dom

So, the number of simultaneous requests need to be limited in https://github.com/allartk/leaflet.offline/blob/master/src/ControlSaveTiles.js#L178 (eg in batches per 100, instead of unlimited number of requests)

If you have time, i would welcome a pull request.

from leaflet.offline.

I have managed to do a specific fix for my tiles (tile server has max request limit etc, so a nasty fix was done not a good fix for this package).

But a solution that fixes it for chrome and should increase performance on all browsers is:

Fetching a tile, then await tile to be saved to idb (making fetch requests increase memory, saving them to idb removes it from memory). On all browsers except chrome with the current version it works fine, but still the browsers becomes semi-unresponsive. With the new solution every browser should work like a sharm.

What I am doing specifically that I find works very well and can be used in this package:

make a batch of request that is equal to the number of subdomains you are using. OSM subdomain('abc') = batches of 3. Then each time 3 requests are done, wait until they are done saving into idb. then ask for next.
This works very well. (my experience so far is that increased batch sizes over number of subdomains is not good, at least not if you have slow tile servers (if it takes a long time to get response).

Edit: Increased batch sizes of 50 works very well with open street map.

from leaflet.offline.

I'll try to take a look over the weekend.

from leaflet.offline.

The fix works for other browsers. But Chrome still gives error because of the chrome limit.
Can't figure out a possible solution for this, as we have to ask for each tile one by one... would be nice if we could ask for an array of tiles..

from leaflet.offline.

What's your config, did you try lowering the parallel opt?

from leaflet.offline.

parallel is on default 50 (did not try anything else, but I suspect this is not the issue)

Trying to download about 3k tiles (my own tiles, in my experience openstreetmap tiles are less amounts of data) so try about 6-7k amount of tiles to download with osm. (do more if u dont get the error)

 const controlSaveTiles = L.control.savetiles(tileLayerOffline, {
      zoomlevels: [4,5,6,7,8,9,10,11,12,13,14,15,16,17,18, 19], // save all zoom levels
      confirm(layer, succescallback) {
        if (window.confirm(`Save ${layer._tilesforSave.length}`)) {
          succescallback();
        }
      },
      confirmRemoval(layer, successCallback) {
        if (window.confirm('Remove all the tiles?')) {
          successCallback();
        }
      },
      saveText: 'save',
      rmText: 'delete',
    }).addTo(map)

From what I have read, google chrome has some kind of limit when hitting about 6000 requests.
happy to explain further if this was not clear enough.
if you cant reproduce, tell my and I will try to get a codepen out tommorrow

Edit: I tried changing the parallell option aswell. But the issue is that it still sends all network requests instantly. (it has to be queued i think and not ran in parallel).. 50 -> await done -> 50 -> await done....

from leaflet.offline.