Skip to content

Instantly share code, notes, and snippets.

@to
Created June 28, 2012 14:24
Show Gist options
  • Save to/3011667 to your computer and use it in GitHub Desktop.
Save to/3011667 to your computer and use it in GitHub Desktop.
Offline Application Cache on iOS 5
CACHE MANIFEST
NETWORK:
*
<!doctype html>
<html manifest="cache.manifest">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>cache</title>
<script type="text/javascript">
function startApplication(status){
alert('START: ' + status);
}
(function(){
// 初回読み込み/マニフェストファイルの取得失敗/未キャッシュのいずれかか?
if(applicationCache.status == applicationCache.UNCACHED){
startApplication('uncached');
// キャッシュ完了後に発生するupdatereadyによる再読み込みを避ける
return;
}
applicationCache.addEventListener('updateready', function(){
alert('reload');
// ページを再読み込みするとswapCacheは自動で行われる
window.location.reload();
}, false);
applicationCache.addEventListener('noupdate', function(){
startApplication('noupdate');
}, false);
applicationCache.addEventListener('error', function(){
if(navigator.onLine){
// サーバー接続失敗/キャッシュファイルの記述エラーなど
alert('error');
startApplication('error');
} else {
startApplication('offline');
}
}, false);
})();
</script>
</head>
<body>
</body>
</html>
@to
Copy link
Author

to commented Jun 28, 2012

主にキャッシュをアプリケーションの構成要素(JavaScript/CSS/HTML)に対して使う用途向けのサンプル。最新の状態まで更新されるか、または、オフライン時にアプリケーションを開始させる。キャッシュ近辺の挙動は変化が大きく、以前からあるブログ記事などの情報の多くは正しくなくなっている(iOSのmanifestの更新を検知しないバグが直ってる/html5rocks.comやdeveloper.apple.comの記述も正確とは思えない)。主に雑誌の誌面画像など、コンテンツに対してキャッシュを利用している場合は、再読込を行わずにswapCacheで済ませることもできる可能性がある。

@to
Copy link
Author

to commented Jun 28, 2012

スクリプトからmanifestを設定することはできなかった。document.documentElement.setAttribute('manifest', 'cache.manifest');またlength/remove/add/itemも未実装だった。スクリプトのみで、キャッシュの内容を変化させることはできなそう。

@to
Copy link
Author

to commented Jun 28, 2012

アプリケーション キャッシュ初心者ガイド - HTML5 Rocks
http://www.html5rocks.com/ja/tutorials/appcache/beginner/

Safari Client-Side Storage and Offline Applications Programming Guide: HTML5 Offline Application Cache
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html

Safari Web Content Guide: Storing Data on the Client
http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/Client-SideStorage/Client-SideStorage.html

@to
Copy link
Author

to commented Jun 28, 2012

呼び出し元のhtmlは自動でキャッシュされる。またキャッシュを回避する方法も見つからなかった(NETWORKセクションへの記述も無視される)。小さな画像は自動でキャッシュされるため、実験の際はクエリパラメーターの付加などでデフォルトキャッシュの挙動を回避する必要がある(こちらもNETWORKセクション無視。iOS Safariのキャッシュ周辺の動作はバグが多い)。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment