Download files and store them locally with Phonegap/jQuery Mobile Android and iOS Apps

Question

I wrote an jQuery Mobile app and packaged it with Phonegap to iOS and Android apps.

At this point I am using locally stored json files to read data.

I would like to update these json files from time to time by downloading newer json files from a server.

How can I get the json from the server and store the json files to the local file system of Android and iOS?

Cheers Johe

Answer 1

Use FileTransfer.download, here is an example:

function downloadFile(){  window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,      function onFileSystemSuccess(fileSystem) {         fileSystem.root.getFile(         "dummy.html", {create: true, exclusive: false},          function gotFileEntry(fileEntry) {             var sPath = fileEntry.fullPath.replace("dummy.html","");             var fileTransfer = new FileTransfer();             fileEntry.remove();              fileTransfer.download(                 "http://www.w3.org/2011/web-apps-ws/papers/Nitobi.pdf",                 sPath + "theFile.pdf",                 function(theFile) {                     console.log("download complete: " + theFile.toURI());                     showLink(theFile.toURI());                 },                 function(error) {                     console.log("download error source " + error.source);                     console.log("download error target " + error.target);                     console.log("upload error code: " + error.code);                 }             );         }, fail);     }, fail); }; } 

Answer 2

This is how I solved it. First set the file paths, wich are different for Android and iOS

var file_path; function setFilePath() {     if(detectAndroid()) {            file_path = "file:///android_asset/www/res/db/";         //4 Android     } else {         file_path = "res//db//";         //4 apache//iOS/desktop     } } 

Then I load my JSON files, wich are prepackaged with the app, into the local browser storage. Like this:

localStorage["my_json_data"] = loadJSON(file_path + "my_json_data.json");  function loadJSON(url) {     return jQuery.ajax({         url : url,         async : false,         dataType : 'json'     }).responseText; } 

If I wanna update my data. I get the new JSON Data from the server and push it into the local storage. If the server is on a different domain, which is the case most of the time, you have to make a JSONP call (check jQuery's docs on JSONP). I did it kinda like this:

$.getJSON(my_host + 'json.php?function=' + my_json_function + '&callback=?', function (json_data) {     //write to local storage     localStorage["my_json_data"] = JSON.stringify(json_data);  });