ユーザーが SVG を表示できる Web アプリケーションがあります。これらの SVG には通常、相対 URL を使用して読み込まれる画像が含まれています。これを iPad の「Web アプリ」にしたいので、これを iPad ユーザーのホーム画面に追加し、HTML 5 アプリケーション キャッシュによってキャッシュして、ユーザーがこれらの SVG と関連する画像をオフラインで表示できるようにします。
アプリケーションが iPad のホームページ アイコンから読み込まれると、アプリケーション キャッシュ マニフェストが正しく読み取られ、参照されているすべてのリソースがキャッシュされます。この問題は、ユーザーがアプリケーションをオフラインで使用し始めたときに発生します。アプリケーションの使用中に、SVG が追加され、ページ DOM から削除されます。この間、SVG 内の一部の画像は、アプリケーション キャッシュから確実に存在してキャッシュされているにもかかわらず、アプリケーション キャッシュからの読み込みに失敗します。代わりに、サーバーに対して画像の要求が行われますが、ユーザーがオンラインではないため、明らかに失敗します。
興味深いことに、この問題は、iPad のサファリでページに移動するときには発生しないようです。保証はできませんが、フル ページの Web アプリ ビューに固有のようです。
この HTML ページを使用して、これを非常に簡単に再現できます。
<!DOCTYPE html>
<html manifest="testfiles.manifest">
<head>
<title>Test</title>
<script src="Javascript/jquery-1.7.1.js" type="text/javascript"></script>
<!-- Remove the browser chrome when the page is loaded from a homescreen icon -->
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<h1>Simple SVG caching test</h1>
<h2>Basket ball SVG</h2>
<p>
<span id="remove">Remove</span> | <span id="add">Add</span>
</p>
<p>
<span id="show">Show</span> | <span id="hide">Hide</span>
</p>
<p>
<span id="reload">Reload</span>
</p>
<embed width='360' height='510' src='TestFiles/Basketball.svg' />
<script type="text/javascript">
$(function ()
{
$("#remove").click(function ()
{
$("embed").remove();
});
$("#add").click(function ()
{
$("<embed width='360' height='510' src='TestFiles/Basketball.svg' />").appendTo("body");
});
$("#show").click(function ()
{
$("embed").show();
});
$("#hide").click(function ()
{
$("embed").hide();
});
$("#reload").click(function ()
{
location.reload(true);
});
})
</script>
</body>
</html>
この SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="340"
height="340">
<image
width="340"
height="340"
xlink:href="Basketball.png"
x="0"
y="0" />
</svg>
SVG によって参照されるこの画像:
そして、このマニフェスト ファイル:
CACHE MANIFEST
CACHE:
TestFiles/Basketball.svg
TestFiles/Basketball.png
Javascript/jquery-1.7.1.js
そして、次の手順に従ってください。
- Safari を開き、複製 html ファイルの場所に移動します (Windows 2008 / IIS サーバーでホストされています)。
- [ホーム画面に追加] ボタンを使用して、ページをホーム画面に追加します。
- Safari を閉じて、Safari キャッシュを消去します
- 新しく追加されたブックマークからページを読み込む
- ページが完全にキャッシュされるまで待ちます。通常は約 5 ～ 10 秒ですが、一部のアプリケーション キャッシュ イベントにアタッチしてログアウトの進行状況を確認することもできます。
- Wi-Fiをオフにする（または使用する接続手段をすべてオフにする）
- 新しく追加されたブックマークからページを読み込む
- ページが正しくキャッシュされているように見えることに注意してください。追加および削除ボタンを使用します。ページの「追加」ボタンを使用して追加すると、すぐに気付くはずです。SVG の画像リソースは、明らかにキャッシュされているにもかかわらず、常にアプリケーション キャッシュから読み込まれるわけではありません。
問題が発生すると、以下のスクリーン ショットのようなものが表示されます。
私はすでにいくつかの明白なことをチェックしました：
- アプリケーション キャッシュ マニフェストの MIME タイプが正しい
- マニフェストがダウンロードされます
- マニフェストで参照されるリソースは正しくキャッシュされます
私の質問は次のとおりです。
- なぜこれが起こるのか誰か知っていますか？
- この問題の回避策はありますか?
これをアップルのバグとして記録したので、彼らから得たフィードバックでこの質問を更新します!
ありがとう！
アンディ。