web-dev-qa-db-ja.com

ファイルをダウンロードし、Phonegap / jQuery Mobile AndroidおよびiOSアプリでローカルに保存します

JQuery Mobileアプリを作成し、Phonegap to iOSおよびAndroidアプリ。

この時点で、ローカルに保存されたjsonファイルを使用してデータを読み取ります。

サーバーから新しいjsonファイルをダウンロードして、これらのjsonファイルを随時更新したいと思います。

サーバーからjsonを取得し、jsonファイルをAndroidおよびiOSのローカルファイルシステムに保存するにはどうすればよいですか？

歓声ヨヘ

androidioscordovajquery-mobile
43
j7nn7k

これは私がそれを解決した方法です。最初にファイルパスを設定します。ただし、Androidと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
    }
}

次に、JSONファイルをロードします。このファイルはアプリに事前にパッケージ化されており、ローカルのブラウザーストレージに格納されています。このような：

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

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

データを更新したい場合。サーバーから新しいJSONデータを取得し、ローカルストレージにプッシュします。サーバーが別のドメインにある場合（ほとんどの場合）、JSONP呼び出しを行う必要があります（jQueryのドキュメントで [〜＃〜] jsonp [〜＃〜] ）。私はそれをちょっとこうしました：

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

つかいます FileTransfer.download、ここに例があります：

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

これは1行のコードで実行できます。

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

target_path：ディレクトリ（例：dira/dirb/file.html）を含めることができ、ディレクトリは再帰的に作成されます。

これを行うためのライブラリはここにあります：

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

8
Jorge Torres

私の提案は、PhoneGapの File API を調べることです。私はそれを自分で使用していませんが、あなたが望んでいることをするはずです。

2
avoision

新しい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

ファイルをダウンロードして表示するには、サンプルコードに従ってください。

Index.htmlの</head>タグのすぐ上に特定のコードを含めます

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

参照： ブログ投稿

0
Adarsh V C