Custom Layer for react-leafleat with naive cache mechanism

CachedLayer.js

import { withLeaflet, GridLayer } from "react-leaflet";
import L from "leaflet";

class Grid extends GridLayer {
  createLeafletElement() {
    const { url, cacheName } = this.props;

    const Layer = L.TileLayer.extend({
      createTile: (coords, done) => {
        const { x, y, z } = coords;
        // this is the url for tile
        const tileUrl = url
          .replace("{x}", x)
          .replace("{y}", y)
          .replace("{z}", z);

        // create new instance of Image (later filled with cached data blob)
        const tileImage = new Image();
        // use the actual url as fallback in case we didn't cached it
        tileImage.src = tileUrl;

        try {
          caches.open(cacheName).then(cache => {
            cache.match(tileUrl).then(tile => {
              // in the case we haven't found a cached tile let's return fallback
              if (!tile) {
                done();
                return;
              }

              // we have something, let's transform the blob and render it!
              tile.blob().then(blob => {
                const tileImageData = URL.createObjectURL(blob);
                tileImage.src = tileImageData;
                done();
              });
            });
          });
        } catch (e) {
          console.warn("CachedLayer issue", e);
          done();
        }

        return tileImage;
      }
    });

    return new Layer(url);
  }
}

export default withLeaflet(Grid);