7

HTML5 の Web ストレージとアプリケーション キャッシュに、ゆっくりと、しかし確実に夢中になっています。

これが私の例です: http://daviddarx.com/stuffs/work/custom/54/

キャッシュ マニフェストは有効であり、http://manifest-validator.com/ でテストされています: http://daviddarx.com/stuffs/work/custom/54/cache.manifest

うまくいかなかったので、私は非常に単純な作業を取り上げ、コードとデータの一部を少しずつ追加して、もう一度テストしました。

簡単な例から始めると、すべてがうまく機能します。iPhone を機内モードにすると、Web サイトの起動時にオフライン メッセージが表示されますが、結果は表示されます。

いくつかのアセット (ページ内の HTML コード、1 ~ 2 個の画像など) を追加しても、まだ機能しています。

さらにアセット (たとえば、css と関連するすべての画像) を追加すると、問題が発生します... プレーン モードにしてからページを開くと、通常のメッセージが表示されます (作業中)、別のメッセージが表示され、再試行するかキャンセルするように求められます。キャンセルするとサイトが表示されずにアプリが閉じてしまい、リトライボタンを押しても同じメッセージが何度も出てしまう…。

私は本当にそれについて何をすべきかわかりません。テストの前に毎回キャッシュ マニフェストを検証し、URL を変更するたびに、すべてが確実にリセットされるようにしました。

これは、キャッシュされたファイルの重みと関係がありますか? サイズやファイルの制限はありますか?

もう 1 つの注意点: テストの前に、自分のコンピューターのコンソールで自分のページを常にチェックして、それが明らかな問題ではないことを確認します。実際、すべてのアセットがロードされた状態で、デスクトップ ブラウザーで試行するたびに成功します。

それがどこから来るのか知っていますか?


編集:私は再び多くのテストを行いましたが、まだ動作しません。

状況の概要は次のとおりです。

  1. これが私がテストしているバージョンです: http://daviddarx.com/stuffs/work/custom/61/

2. これは私のキャッシュ マニフェストです: http://daviddarx.com/stuffs/work/custom/61/manifest.appcache http://manifest-validator.com/ によると完全に有効です。

3. Chrome (デスクトップ) にページをロードしてコンソールに表示すると、すべて問題ありません。すべての要素がキャッシュされ、更新するとキャッシュは問題ありません。

4. デスクトップ クロームにページをロードしてネットワーク パネルを見ると、すべてがキャッシュからロードされていることがわかります。不足しているファイルはありません。

5. デスクトップ コンピューターをインターネットから切断しても、機能しています。接続せずにクロムでウェブサイトを閲覧すると、ページを表示でき、すべて問題なく、Iphone にあると予想されます。

6. IPhone を使用して初めて Web サイトにアクセスすると、すべて問題ありません。モバイル サファリのコンソールにエラーはありません。「飛行機モード」をオンにしてサファリに戻ると、以前は表示できなかったページを表示できます。しかし、ページを変更しようとすると、「ページを開くことができません」という警告が表示され、リクエストがキャンセルされます。現在のページにとどまることしかできません。

デスクトップ コンピューターではすべてが完璧ですが、iPhone では機能しません。

何か考えはありますか?デスクトップとiPhoneのブラウザで試してみませんか?

4

2 に答える 2

4

/ 61 /テストバージョンを分析しました:

JS関数preloadDetailImagesは、CSSクラスからbackground-image URLを引き出し、contentそれをsrc属性として新しいImageオブジェクトに配置します。次に、この画像がDOMに追加され、ブラウザが画像をプリロードできるようになります。ただし、CSS定義のURLを囲む二重引用符srcは削除されないため、最終的に属性値の一部になります。これにより、明らかにキャッシュされていないためオフラインで機能しない破損したURLが生成されます。

これはCSSの定義です。

#websiteContainer #customContainer .content {
    background-image: url("../images/custom_part_background.jpg");
}

このJSコードを使用して、二重引用符を含むurl()内のすべてを抽出します。

$($(".content")[actualImageLoadingID]).css("background-image")
.split("url(")[1].split(")")[0]

そして、これがドキュメントの最終的な内容です("sに注意してください)。

<img src="&quot;http://daviddarx.com/stuffs/work/custom/61/mobile/images/custom_part_background.jpg&quot;" style="display: none;">

二重引用符は有効なURL部分である可能性があるため、ブラウザはこれを相対パスとして解釈し、 / stuffs / work / custom / 61 /%22http://daviddarx.com/stuffs/work/custom/61/mobile/を取得しようとします。サーバーからのimages/custom_part_background.jpg%22。httpスニファで確認できます。

解決策:CSS定義の引用符を削除するか、JS関数で引用符を除外します。


これはおそらくiPhoneでのキャッシュの問題の主な理由ではなく、コメントとしてこれを追加したいと思いますが、まだ特権がありません。

于 2012-08-29T16:05:46.513 に答える
1

あなたは、アセットを追加すると問題が発生し始めると言います。おそらくキャッシュ制限に達しています。

HTML5 クォータの背景については、次のリンクを確認してください: http://updates.html5rocks.com/2011/11/Quota-Management-API-Fast-Facts

于 2012-09-03T22:46:21.727 に答える