4

cache.manifestがhtml5アプリのすべてのファイルをダウンロードしたときに成功メッセージを警告するにはどうすればよいですか?(完全なキャッシュダウンロードに関する基本的な成功アラート)!

ありがとう

4

2 に答える 2

2

GardenGnomeの非常によく考えられた記事に感謝します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に表示されます。

于 2012-08-24T08:49:27.820 に答える
0

オブジェクト内のさまざまなイベントにバインドできwindow.applicationCacheます。その一つがupdatereadyイベントです。

また、キャッシュの更新がユーザーに対して正しくリロードされていることを確認する必要があります。Application Cache の基本、そのイベント、およびプログラムによる更新の処理方法について説明している次の記事を参照してください。

AppCache を扱う際に参照する必要があるその他の記事は次のとおりです。

于 2012-08-22T09:21:57.173 に答える