webentwicklung-frage-antwort-db.com.de

Laden Sie Dateien herunter und speichern Sie sie lokal mit Phonegap/jQuery Mobile Android und iOS Apps

Ich habe eine jQuery Mobile-App geschrieben und mit Phonegap in iOS- und Android-Apps verpackt.

An diesem Punkt verwende ich lokal gespeicherte Json-Dateien, um Daten zu lesen.

Ich möchte diese Json-Dateien von Zeit zu Zeit aktualisieren, indem ich neuere Json-Dateien von einem Server herunterlade.

Wie kann ich den Json vom Server beziehen und die Json-Dateien im lokalen Dateisystem von Android und iOS speichern?

Prost Johe

42
j7nn7k

So habe ich es gelöst. Legen Sie zunächst die Dateipfade fest, die sich für Android und iOS unterscheiden

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
    }
}

Dann lade ich meine mit der App vorgepackten JSON-Dateien in den lokalen Browserspeicher. So was:

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

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

Wenn ich meine Daten aktualisieren möchte. Ich bekomme die neuen JSON-Daten vom Server und schiebe sie in den lokalen Speicher. Wenn sich der Server in einer anderen Domäne befindet, was meistens der Fall ist, müssen Sie einen JSONP-Aufruf durchführen (prüfen Sie die Dokumente von jQuery unter JSONP ). Ich habe es irgendwie so gemacht:

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

Verwenden Sie FileTransfer.download, hier ein Beispiel:

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

Sie können dies in einer Codezeile tun:

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

zielpfad: kann ein Verzeichnis enthalten (Beispiel: dira/dirb/file.html) und die Verzeichnisse werden rekursiv erstellt.

Die Bibliothek dazu finden Sie hier:

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

8
Jorge Torres

Mein Vorschlag wäre ein Blick in PhoneGaps File API . Ich habe es selbst nicht benutzt, aber es sollte tun, was Sie wollen.

2
avoision

Antwort zum neuen Cordova aktualisiert

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

Folgen Sie zum Herunterladen und Anzeigen einer Datei dem Beispielcode. 

Fügen Sie den angegebenen Code direkt über dem </head>-Tag in Ihre index.html ein

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

Verweisen: - Blogbeitrag

0
Adarsh V C