HTML 离线应用缓存，列出下载的文件答案

【问题标题】：HTML Offline Application Cache, Listing Downloaded FilesHTML 离线应用缓存，列出下载的文件
【发布时间】：2014-04-01 03:46:23
【问题描述】：

作为我正在构建的支持离线的 Web 应用程序 (using a cache manifest) 的加载屏幕的一部分，我想显示一个准确的进度条，让用户知道到目前为止哪些文件已下载，哪些文件正在下载仍悬而未决。类似于以下内容：

加载中...
/assets/images/logo.png：已加载
/assets/images/splashImage.png：待定

我知道我可以使用缓存“待处理”事件，但我没有看到事件参数有任何与之关联的数据。

有什么办法吗？

【问题讨论】：

标签： javascript html offline-browsing

【解决方案1】：

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

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

我应该补充一点，在 Chrome 中（不是在 Safari 或 FF 中），您至少可以获得要下载的文件的数量，从而至少可以计算出准确的进度条。要在 Chrome 中获取此信息，您可以使用以下内容：

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

但是这会在其他浏览器中出错，因此您需要包装 try/catch 或其他方法 (typeof(e.total)) 以避免错误。

【讨论】：

这与我一直在阅读的内容一致。我会祈祷这会成为未来的规范
我希望如此，但我不会打赌。根据我所读到的关于他们在 HTML5 中的路径，他们希望将其留给浏览器来执行进度条并显示文件等，并为您可以手动删除的不同站点提供一种文件浏览器。
对我来说，Chrome 还提供了一个e.loaded，非常方便。请注意，您是否将事件与 JQuery 绑定，例如 $( appCache ).bind("progress",function( event ){});。已加载和总计丢失。

【解决方案2】：

这已经晚了几年，但也许它会帮助其他正在研究这个的人。它没有列出文件或任何内容，但它会根据加载的文件总数显示一个准确的（ish）进度条。它可能还需要一些工作...... https://github.com/joelabeyta/app-cache-percent-bar

【讨论】：