web-dev-qa-db-fra.com

Téléchargez des fichiers et stockez-les localement avec les applications Android et iOS de Phonegap/jQuery Mobile

J'ai écrit une application jQuery Mobile et je l'ai intégrée dans les applications iOS et Android de Phonegap.

À ce stade, j'utilise des fichiers JSON stockés localement pour lire les données.

Je souhaite mettre à jour ces fichiers JSON de temps en temps en téléchargeant les fichiers JSON les plus récents à partir d'un serveur.

Comment obtenir le fichier json du serveur et stocker les fichiers json dans le système de fichiers local d'Android et d'iOS?

A bientôt. Johe

androidioscordovajquery-mobile
42
j7nn7k

Voici comment je l'ai résolu. Commencez par définir les chemins de fichiers, qui sont différents pour Android et 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
    }
}

Ensuite, je charge mes fichiers JSON, pré-emballés avec l'application, dans la mémoire de stockage du navigateur local. Comme ça:

localStorage["my_json_data"] = loadJSON(file_path + "my_json_data.json");

function loadJSON(url) {
    return jQuery.ajax({
        url : url,
        async : false,
        dataType : 'json'
    }).responseText;
}

Si je veux mettre à jour mes données. Je récupère les nouvelles données JSON du serveur et les envoie dans la mémoire de stockage locale. Si le serveur est sur un domaine différent, ce qui est le cas la plupart du temps, vous devez effectuer un appel JSONP (consultez la documentation de jQuery sur JSONP ). Je l'ai fait un peu comme ça:

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

});
24
j7nn7k

Utilisez FileTransfer.download, voici un exemple:

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);
};
}
94
justmoon

Vous pouvez le faire en une seule ligne de code:

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

target_path: peut inclure un répertoire (exemple: dira/dirb/fichier.html) et les répertoires seront créés récursivement.

Vous pouvez trouver la bibliothèque pour le faire ici:

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

8
Jorge Torres

Ma suggestion serait de regarder dans File API de PhoneGap. Je ne l'ai pas utilisé moi-même, mais il devrait faire ce que vous voulez.

2
avoision

Réponse mise à jour pour la nouvelle Cordova

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();
        }
    );
}
1
Flavio Lacerda

Pour télécharger et afficher un fichier, suivez le code exemple. 

Incluez le code donné juste au-dessus de la balise </head> dans votre 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>

Référez-vous: - Blog Post

0
Adarsh V C