使用 javascript 完成清单缓存时发出警报答案

【问题标题】：Alert upon completion of Manifest cache with javascript使用 javascript 完成清单缓存时发出警报
【发布时间】：2012-08-17 15:02:37
【问题描述】：

当 cache.manifest 已下载 html5 应用程序中的所有文件时，如何提示成功消息？（在完成缓存下载时基本成功提示）！

谢谢

【问题讨论】：

我的应用程序大约 43 MB（由于 png 文件很大）我需要确保 ipad 在我离线之前缓存所有数据。

标签： javascript html caching cache-manifest

【解决方案1】：

感谢来自 Garden Gnome http://gardengnomesoftware.com/wiki/Cache_Manifest_File 的深思熟虑的文章

我找到了答案。您所要做的就是创建一个 div，它将通过将其添加到您的页面来显示缓存的状态：

<div id="cachestatus" style="position:fixed;left: 2px;top: 2px; width: 150px;height:18px;color: #ff0000;padding: 1px 3px; opacity:1; z-index:100; font-family:Arial, Helvetica, sans-serif; opacity:0.2;"></div>

在这个 div 之后添加以下 java 脚本：

<script type="text/javascript">

    var cacheStatus  = document.getElementById('cachestatus');
    cacheStatus.innerHTML="cache status";


    if (navigator.onLine) {
        window.applicationCache.addEventListener('updateready', function(e) {
            if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
                window.applicationCache.swapCache();
                cacheStatus.innerHTML="update ready!";
                if (confirm('A new version of this page is available. Reload?')) {
                    window.location.reload();
                }
            }
        }, false);
        window.applicationCache.addEventListener('cached', function(e) {cacheStatus.innerHTML="cache is ready!"; },false);
        window.applicationCache.addEventListener('noupdate', function(e) { cacheStatus.innerHTML="cache is up to date!"; },false);
        window.applicationCache.addEventListener('downloading', function(e) { cacheStatus.innerHTML="downloading..."; },false);
        window.applicationCache.addEventListener('error', function(e) { cacheStatus.innerHTML="error"; },false);
        window.applicationCache.update();
    } else {
        cacheStatus.innerHTML="offline";
    }
</script>

缓存的状态会显示在DIV中。

【讨论】：

【解决方案2】：

您可以绑定到window.applicationCacheobject 中的各种事件。其中之一是updateready 事件。

您还必须确保为用户正确重新加载任何缓存更新。请参阅以下article，其中涵盖了应用程序缓存基础知识、其事件以及如何以编程方式处理更新。

在处理 AppCache 时您应该参考的其他一些文章是：

【讨论】：