Download Files and Store Them Locally with Phonegap/Jquery Mobile Android and iOS Apps

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

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);

});

PhoneGap Downloader plugin in Android

I've used a downloader plugin quite a long time ago with phonegap 2.2 and it was quite easy to use.

Is this the plugin you are trying to use? or maybe this one?

The fist one seems to have been updated for the phonegap 2.7+ format so maybe usable in a phonegap 3 project, except that you won't be able to install using the CLI and will have to had the plugin manually in platform/android or you could write a plugin.xml yourself.

To use it, you just have to follow the instructions in the readme.md or read the original article in http://www.toforge.com/2011/02/phonegap-android-plugin-for-download-files-from-url-on-sd-card/

Again I haven't tried to use it in recent versions of phonegap and am not sure if the plugin should be updated to be compatible.

Edit:
For each file you have to call:

window.plugins.downloader.downloadFile("http://server/file.txt", {overwrite: true}, 
      function(res) {
        //function called when the file is downloaded
        //the file content is in res
    }, function(error) {
        //function called in case of error
    }
);

if you need to download several files, you could download the next file in the function called in case of success.

Storing video for offline use in PhoneGap/Chrome Apps

You can do this in Cordova apps (and very soon in Chrome Cordova apps). You'll need the most recent versions of the File (1.0.1) and FileTransfer (0.4.2) plugins.

With those, you can use FileTransfer.download() to download the video, and you can use File to access the file and create a <video> tag to play the video.

You'll want to use the .toNativeURL() method on the file entries before you play them. Recent versions of the File plugin use a custom URL scheme for files, which is unfortunately not compatible with the HTML <video> tag.

This is the test code that I use to test the interaction of these methods:

var filename = "small.mp4";
var videoURL = "http://techslides.com/demos/sample-videos/small.mp4";

requestFileSystem(PERSISTENT, 0, function(fileSystem) {
    var ft = new FileTransfer();
    ft.download(videoURL, fileSystem.root.toURL() + "/" + filename, function(entry) {
        var videoElement = document.createElement('video');
        videoElement.controls = 'controls';
        videoElement.src = entry.toNativeURL();
        document.videoElementById("output").appendChild(imgElement);
    });
});

Update

With the latest version of the File plugin (1.1.0), you no longer need to use .toNativeURL() to obtain a URL that you can use as a src attribute for a video. The standard .toURL() method will return such a URL.

---

Related Topics