0

アプリケーションがオフラインで動作しないという断続的な問題のように最初に思われた現象が発生しています。

私のアプリケーションに関するいくつかの詳細：

  • アプリケーションへのエントリ ポイントはログイン ページです
  • 私のアプリケーションのすべてのページは、ログイン ページを除いて、動的データを表示します。また、動的データを表示するページがキャッシュされないようにするために、ログイン ページの html 要素にマニフェスト属性のみを含めることにしました。
  • マニフェスト ファイルにリストされているアセットの合計サイズは、約 1 MB です。

問題を再現するための手順 (ブラウザ/デバイスに applicationCache リソースがキャッシュされていないと仮定します):

  • ログイン ページに移動します (applicationCache リソースのダウンロードが開始されます)。
  • すぐにアプリケーションにログイン
  • オフラインにしてオフライン リソースを要求する
  • ブラウザが applicationCache からのリソースの提供に失敗したことに注意してください

具体的な証拠はありませんが、私が最終的に発見したのは、ブラウザが applicationCache アセットを取得している間にログイン ページから移動し、appCache アセットのダウンロードを中断し、オフライン時にオフライン リソースが提供されないことにつながることです。 . これは予期されたブラウザの動作ですか? 十分な時間待って、ブラウザーにアセットをダウンロードする機会を与えると、オフライン機能が機能します。

オフライン機能を確保するために、applicationCache キャッシュ イベントが発生するまで、ユーザーがログイン ページから移動できないようにする必要がありますか?

4

1 に答える 1

1

これは予期されたブラウザの動作ですか?

それは確かに意図された動作です。http://diveintohtml5.info/offline.html#debuggingを参照してください

if even a single resource listed in your cache manifest file fails to download properly, the entire process of caching your offline web application will fail. Your browser will fire the error event, but there is no indication of what the actual problem was.

私が考えることができる1つの解決策はbeforeunload、 the が または のいずれかであるかどうかをwindow.applicationCache.status確認することです。checkingdownloading

または、ユーザーの localStorage にフラグを設定して、errorイベント (以下を参照) を使用して最後の試行が失敗したことを示し、すべてが正常にロードされるまでファイルの再フェッチを試みることができる場合があります。

キャッシュするものがたくさんある場合は、進行状況バーと、ページの読み込み中にユーザーに辛抱するように求めるテキストを表示できます。進行状況バーについては、キャッシュ処理関数の進行状況イベントでevent.loaded使用できます。event.total

var appCache = window.applicationCache;

// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);

// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', handleCacheEvent, false);

// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', handleCacheEvent, false);

// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);

// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);

// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);

// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);

// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false);

function handleCacheEvent(e){
    if(e.type && (e.type=='progress' || e.type=='ProgressEvent')){
        console.log('percent:', Math.round(e.loaded/e.total*100)+'%', 'total:', e.total, 'loaded:',e.loaded);
    }
}
于 2013-03-25T12:41:59.713 に答える