tiles not loading in crosswalk/webview

[isaldarriaga]

i wrapped an angularJS SPA demo with the leaflet-map web component inside.

The element works perfectly in the web browser, but not in a hybrid app in mobile device (android/amazon fireOS).

This looks to be a common issue with cordova apps when images are loaded from remote locations instead of the device's file system.

I remote debugged the device with chrome's inspector. All the tile images get a 404.

steps to repro:
install ionic framework (or just cordova)
$ionic create leafletdemo blank
optionally add crosswalk support (this replace webview)
edit the index.html and add the leaflet-map
connect the device (debugging enabled)
$ionic run android
goto chrome://inspect/#devices and see the network tab

Looks a custom implementation of a transfer file/cache pattern inside the component is required for solving the issue, instead of using the img tag with a remote src.

refs:
http://tech-blog.silviaterra.com/2013/02/offline-mapping-in-html5-mobile-apps.html
https://github.com/apache/cordova-plugin-file-transfer