下载文件以供离线使用 Cordova/PhoneGap 构建

Posted 2023-05-06

【中文标题】下载文件以供离线使用 Cordova/PhoneGap 构建

【英文标题】：Download file for offline use Cordova/PhoneGap build

【发布时间】：2018-05-19 06:06:58

【问题描述】：

在应用程序开发方面，我是新手。我为 android 和 ios 制作了一个简单的音频播放器应用程序，并使用 phonegap build 构建它。

应用程序使用<audio> html 标记来加载位于远程服务器上的 mp3 文件，如下所示：

            <div class="mobileui-music-cover-controls">
    <audio ontimeupdate="udpateProgress()" id="player">
        <source src="http://www.myserver.com/audiofile.mp3" type="audio/mpeg">          
    </audio>
            <a id="playKnop" href="javascript:playMusic()" class="play"><i class="ion-ios-play"></i></a>
            <a id="pauseKnop" href="JavaScript:pauseMusic()" class="play"><i class="ion-ios-pause"></i></a>
        </div>

显然，我为这个例子更改了scr。

只要您有稳定的互联网连接，它就可以正常工作，但有些人遇到连接中断等问题。 我想根据用户请求使文件脱机可用。所以它必须是可选的（通过单击按钮或类似的东西）。 应用程序应检测设备上是否存在该文件，如果存在则选择本地文件而不是远程文件。

简而言之，我有 2 个问题。

如何根据用户请求下载特定文件？ 如何检查文件是否存在并播放正确的文件？

我似乎无法弄清楚如何做到这一点，我最近几天一直在努力，但老实说，我不知道如何做到这一点。任何帮助将不胜感激。

【参考方案1】：

正如您所说，您需要将文件下载到您的设备。由于您使用cordova，您可以使用fileTransfer 下载音频。这非常简单（这是官方示例代码）：

// !! Assumes variable fileURL contains a valid URL to a path on the device,
//    for example, cdvfile://localhost/persistent/path/to/downloads/

var fileTransfer = new FileTransfer();
var uri = encodeURI("http://some.server.com/download.php");

fileTransfer.download(
    uri,
    fileURL,
    function(entry) 
        console.log("download complete: " + entry.toURL());
    ,
    function(error) 
        console.log("download error source " + error.source);
        console.log("download error target " + error.target);
        console.log("download error code" + error.code);
    ,
    false,
    
        headers: 
            "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
        
    
);

下次播放音频时需要检查是否有本地版本。要么检查你的设备是否存在该文件（有很多方法，例如Cordova check if file in url exists），要么使用localStorage 之类的东西，它基本上是一个简单的 lil 数据库。

// more or less pseudo code!!!

// callback from fileTransfer when your file was downloaded
function downloadSuccess(entry) 
    // save it to localStorage 
    // key: the remote URL, value: the local URL
    localStorage.setItem(remoteURL, entry.toURL());


...
...

// the check if there is a cached file
var remoteSrc = "http://www.myserver.com/audiofile.mp3";
var localSrc = localStorage.getItem(remoteSrc);

if(localSrc === null) 
    // when there is NO cached version, use remote
    audioElement.src = remoteSrc;
 else 
    // when there IS a cached version, use local
    audioElement.src = localSrc;

我希望这对您有所帮助，并让您了解如何自己完成简单的缓存:)