PhoneGap/Cordova FileTransfer is blocking Enyo (1) surface
I've got a problem with Enyo 1 and PhoneGap. I could not find anything with google about that, any help would be appreciated.
I've got a kind which fetches data from the web and saves it to the local file system. The fetch method is called on deviceready and - as this data ist not required to display the home pane - the app is displayed at the same time. Although the app is visible, i am not able to navigate until all files have been loaded. PhoneGap seems to block any input until the file transfer has finished.
In this example below i've reduced the code to a minimum, in the real app more than 100 files are fetched (at least on the first app launch) so thats a really big problem for me:
Any ideas about that?
I've got a kind which fetches data from the web and saves it to the local file system. The fetch method is called on deviceready and - as this data ist not required to display the home pane - the app is displayed at the same time. Although the app is visible, i am not able to navigate until all files have been loaded. PhoneGap seems to block any input until the file transfer has finished.
In this example below i've reduced the code to a minimum, in the real app more than 100 files are fetched (at least on the first app launch) so thats a really big problem for me:
enyo.kind({
name: 'service.Whatever',
kind: enyo.Component,
url: 'http://example.com/path/to/the/files/',
path: 'localfolder/',
xmlFile: 'foobar.xml',
previewFile: 'preview.jpg',
fetch: function() {
var that = this,
fileTransfer = new FileTransfer();
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, that.fetchFailed);
function gotFS(fileSystem) {
fileSystem.root.getDirectory(that.path, {create: true}, gotLocalDir, that.fetchFailed);
}
function gotLocalDir(dirEntry) {
// fetch xml file
fileTransfer.download(
that.url + that.xmlFile,
dirEntry.fullPath + '/' + that.xmlFile,
gotXml,
that.fetchFailed
);
// fetch preview image
fileTransfer.download(
that.url + that.previewFile,
dirEntry.fullPath + '/' + that.previewFile,
null,
that.fetchFailed
);
}
function gotXml(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
that.setupData(evt.target.result);
};
reader.readAsText(file);
}
},
setupData: function(xml) {
// parse xml var if its a string
if (typeof xml === 'string') {
var parser = new DOMParser();
xml = parser.parseFromString(xml, 'text/xml');
}
// save data as javascript object
this.owner.setData('somekey', Xml.getObject(xml));
},
fetchFailed: function(error) {
enyo.warn(error);
}
});
I thought the calls to the file system will be async and should not block anything. My first suggestion was the huge amount of files, but it's also blocking if i just fetch a few.Any ideas about that?
Comments
My second thought, is how are you calling these functions? Another idea would be to make this a enyo.Service kind, as Service is designed to wrap async functions.
I tried both, nextTick and asyncMethod, but that does not change anything. The setupData ist only called once as soon as the XML file is loaded, but the surface gets locked as long as files are fetched, not while the setupData runs.
Most of the files are preview images used for something similar to a gallery.
You'll probably find better solutions for this over on the PhoneGap mailing list at http://groups.google.com/group/phonegap.
As a quick solution i will split loading and place a scrim in front of it, then i'll see what the PhoneGap folks has in mind about this.
No, unfortunately i did not. I could not find a forum or contact email, only those ugly Google Group (sorry i don't like it). The bugtracker is deactivated on github, maybe it's a bit of confusion because of the move to apache. Feel free to contact them, i'm also still interested and would appreciate a solution, it's just low priority for me now.