HTML5 のアプリケーション キャッシュ機能を使用した簡単な HTML ページを作成しました。
<!DOCTYPE html>
<html manifest="test.appcache">
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- App icon for iPad (3rd gen) with retina display -->
<link rel="apple-touch-icon" sizes="144x144" href="./img/app-icon/apple-touch-icon-144x144.png">
<!-- App icon for iPhone with retina display -->
<link rel="apple-touch-icon" sizes="114x114" href="./img/app-icon/apple-touch-icon-114x114.png">
<!-- App icon for iPad (1st and 2nd gen) -->
<link rel="apple-touch-icon" sizes="72x72" href="./img/app-icon/apple-touch-icon-72x72.png">
<!-- App icon for iPhone (non-retina) and Android -->
<link rel="apple-touch-icon" href="./img/app-icon/apple-touch-icon.png">
<!-- Favicon for Android browser tabs/bookmarks -->
<link rel="icon" type="image/png" href="./img/app-icon/favicon.png">
<link href="themes/theme1/splash.css" media="screen, projection" rel="stylesheet" type="text/css" />
<script src="js/src/vendor/jquery.js" type="text/javascript"></script>
</head>
<body>
<h1>TEST PAGE</h1>
<div id="splash">
<div id="splash-logo"></div>
<ol class="loader"><li></li><li></li><li></li></ol>
<img id="splash-gtechg2" src="img/logo.png"/>
</div>
</body>
</html>
ご覧のとおり、とてもシンプルです。以下は私のマニフェストです：
CACHE MANIFEST
# Modified: Thu Jan 24 12:22:59 2013
#-----------------------------------------------------------------------------
CACHE:
# js/src/vendor
js/src/vendor/jquery.js
# img/app-icon
img/app-icon/apple-touch-icon-114x114.png
img/app-icon/apple-touch-icon-144x144.png
img/app-icon/apple-touch-icon-72x72.png
img/app-icon/apple-touch-icon.png
img/app-icon/favicon.png
#-----------------------------------------------------------------------------
NETWORK:
*
http://*
https://*
#-----------------------------------------------------------------------------
FALLBACK:
/ offline.html
CSSファイルは次のとおりです。
#splash {
background-image : url(img/background.jpg);
background-position : top left;
}
#splash-logo {
background-image : url(img/splash-logo.png);
background-position : center;
}
ご覧のとおり、テーマ css は appcache に含まれていません。実際のアプリケーションの URL はいつでも変更される可能性があるため、常にネットワークから提供する必要があります。
問題は、サーバーで SSL を有効にすると、CSS ファイルがまったくロードされないことです。HTTP を使用するか、CSS とその画像をマニフェストに配置すると、正常に動作します。これは Mobile Safari でのみ再現されることに注意してください。(私は iOS 6.1 を搭載した iPad3 を持っています)。
再現する手順は次のとおりです。
- iPad の Safari でテスト ページを開く
- すべてが正常に動作します
- Safari を完全に閉じて、最小化ではなく実際に閉じるようにします。
- サファリを開きます。
- 次に、テスト ページで最後に開いたタブを復元しようとしますが、ここで CSS の読み込みに失敗します。
したがって、基本的には「混合コンテンツの警告」も表示されません-黙ってロードに失敗するだけです。
最初は証明書に問題があると思っていましたが、マニフェスト属性を削除するとすぐにすべて正常に動作します。
数日間解決策を見つけようとしていますが、私が試したことはすべてうまくいかないので、ここで質問することにしました. これを解決する方法はありますか？
更新 1:これは、iOS 用の Chrome 23.0.1271.100 で正常に動作します。
更新 2: Adobe にバグを報告し、当面は appcache をオフにします