"Chrome App" - Best way read existing Leaflet Map tiles from Filesystem and fetch if not exist

Question

I am building a "Chrome App" with a Leaflet Map for offline use. The app will fetch map tiles via XMLHttpRequest to avoid the CSP restrictions. Then the tiles will be stored on the file system with the correct URL pattern for subsequent retrieval. I assume the chrome.fileSystem API is the best choice, but the documentation is hard to follow for this use case.

1) What is the path to the map tile files?

2) Can this path be part of the App Files ie Can I create a "Tiles" directory and pre-populate it with tiles and have user accessed tiles added to it?

3) What is the best way to test if a file exists, then if not, go fetch it, add it to the folder, then serve the newly downloaded tile to original request?

4) Or is there a better way to make offline maps?

The goal is to allow users to pre-fetch map tiles while WiFi is available, then use the maps where it is not, as an HTML5 Chrome App.

Answer 1

Map tiles URLs are in the format

http://< tile map server >/{z}/{x}/{y}

A simple way of doing this is to intercept all tile requests and using the URL schema above check for a cached entry.

You can find out more about map tiles here: http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames