HTML 离线应用程序缓存，列出下载的文件

Question

作为我正在构建的离线 Web 应用程序加载屏幕的一部分（使用缓存清单），我想显示一个准确的进度条，让用户知道哪些文件到目前为止已下载，哪些文件仍待下载。类似以下内容：

Loading...
/assets/images/logo.png: loaded
/assets/images/splashImage.png: 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

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