HTML脱机应用程序缓存，列出已下载的文件

Question

作为我正在构建的离线启用的Web应用程序（using a cache manifest）的加载屏幕的一部分，我想显示一个准确的进度条，让用户知道到目前为止已下载的文件和还在等待中。如下所示：

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

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

有没有办法做到这一点？

Answer 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)）以避免错误。

Answer 2

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