HTML脱机应用程序缓存，列出已下载的文件 [英] HTML Offline Application Cache, Listing Downloaded Files

问题描述

作为用于支持离线操作的web应用程序我建立（使用缓存清单），我想显示一个准确的进度条，让用户知道到目前为止哪些文件已下载，哪些文件仍处于待处理状态。如下所示：

As part of a loading screen for an offline-enabled web application I'm building (using a cache manifest), I'd like to display an accurate progress bar that lets users know which files has thus far been downloaded and which are still pending. Something like the following:

Loading...
/assets/images/logo.png: loaded
/assets/images/splashImage.png: pending

我知道我可以使用缓存pending事件，但我没有看到事件参数有任何关联的数据与他们一起。

I know that I can use the cache "pending" event, but I don't see that the event arguments have any data associated with them.

有没有办法做到这一点？

Is there any way to do this?

推荐答案

每个文件下载时会触发 progress 事件，但其有效负载在我测试过的任何浏览器中都不包含文件名（Chrome，Safari， FF beta）。 Chrome在控制台中显示文件名（虽然据我所知它是JS无法访问的），但Safari和FF都没有那么远。从我所看到的情况来看，这些文件的下载顺序与它们在清单中列出的顺序不同，因此甚至没有办法生成有序列表，然后一次将它们删除。

There is a progress event that gets triggered when each file downloads, however its payload does not include the file name in any browser that I've tested with (Chrome, Safari, FF beta). Chrome displays the file name in the Console (though as far as I know it's inaccessible to JS), but neither Safari nor FF even go that far. And from what I've seen, the files do not download in the same order that they're listed in the manifest, so there's not even a way to generate an ordered list then knock them off one at a time.

所以回答你的问题，不，现在没有办法做到这一点。有可能在将来 progress 事件将包含文件名 - 至少在某些浏览器中 - 但现在这是不可能的。

So in answer to your question, no, there isn't any way to do this right now. It's possible that in the future the progress event will include the filename - at least in some browsers - but right now this isn't possible.

我应该在Chrome中添加（不在Safari或FF中），您至少可以获得要下载的文件数量，这样您至少可以计算出准确的进度条。要在Chrome中使用以下内容：

I should add that in Chrome (not in Safari or FF) you can at least get a count of files to be downloaded, allowing you to at least calculate an accurate progress bar. To get this in Chrome you'd use the following:

function downloadProgress(e) {
    totalfiles = Number(e.total);
}
window.applicationCache.addEventListener("progress", downloadProgress, false);

但是这会在其他浏览器中出错，所以你需要包装 try / catch 或其他一些方法（ typeof（e.total））以避免错误。

However this will error out in other browsers, so you need to wrap a try/catch or some other method (typeof(e.total)) to avoid the error.

这篇关于HTML脱机应用程序缓存，列出已下载的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！