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

Question

I wrote a jQuery Mobile app and packaged it using Phonegap into 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 new json files from the server.

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

Cheers Johe

Answer 1

This is how I solved it. First set the file paths that 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 upload the JSON files that are pre-packaged in the application to the local storage of the browser. 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 want to update my data. I get new JSON data from the server and paste it into local storage. If the server is in a different domain, which is used in most cases, you need to make a JSONP call (check jQuery documents for JSONP ). I did it 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); }); 

Answer 2

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 3

You can do this in one line of code:

 new FileManager().download_file('http://url','target_path',Log('downloaded success')); 

target_path: may include a directory (example: dira / dirb / file.html), and directories will be created recursively.

You can find a library to do this here:

https://github.com/torrmal/cordova-simplefilemanagement

Answer 4

My suggestion is to look in the PhoneGap File API . I did not use it myself, but it should do what you need.

Answer 5

Updated answer for new Cordoba

 function downloadFile(url, filename, callback, callback_error) { var fileTransfer = new FileTransfer(); fileTransfer.download(url, cordova.file.dataDirectory + "cache/" + filename, function (theFile) { console.log("download complete: " + theFile.toURL()); if (callback) callback(); }, function (error) { console.log("download error source " + error.source); console.log("download error target " + error.target); console.log("upload error code: " + error.code); if (callback_error) callback_error(); } ); } 

Answer 6

Follow the sample code to download and display the file.

Include this code just above the </head> in index.html

 < script type = "text/javascript" charset = "utf-8" > // Wait for Cordova to load document.addEventListener("deviceready", onDeviceReady, false); // Cordova is ready function onDeviceReady() { alert("Going to start download"); downloadFile(); } 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); } function showLink(url) { alert(url); var divEl = document.getElementById("deviceready"); var aElem = document.createElement("a"); aElem.setAttribute("target", "_blank"); aElem.setAttribute("href", url); aElem.appendChild(document.createTextNode("Ready! Click To Open.")) divEl.appendChild(aElem); } function fail(evt) { console.log(evt.target.error.code); } </script> 

Refer: Blog Post