1)以下のようなHTMLをmanitest.html"というファイル名でWebサーバ上に準備
HTML
1<!DOCTYPE html> 2<html xmlns="http://www.w3.org/1999/xhtml" manifest="cachemanifest.appcache"> 3<head> 4 <meta charset ="utf-8"> 5 <title>Input Name</title> 6 <link rel="stylesheet" type="text/css" href="./css/style.css"> 7 <script type="text/javascript" src="./js/cacheUpdate.js"></script> 8</head> 9<body id="content"> 10 <p> 変更前</p> 11</body> 12</html>
2)次にキャッシュマニュフェストを"cachemanifest.appcache"というファイル名で作成し、
つぎの様に記載しキャッシュされたmanitest.htmlを参照するように設定
text
1CACHE MANIFEST 2#2018/09/05 describe 3#CACHE is updated only when this file is updated 4 5CACHE: 6css/style.css 7manitest.html 8 9NETWORK: 10FALLBACK:
3)Webサーバはapacheを使用しているので、"httpd.conf"ファイルに
AddType text/cache-manifest .appcache
を追加し、拡張子のMIMEタイプを登録後、Webサーバ起動
4)キャッシュの更新を行うscriptを以下の様にして作成
javascript
1if(navigator.onLine){ 2 //キャッシュの更新を実行する(cachemanifest.appcacheのDLの事) 3 applicationCache.update(); 4 //新しいキャッシュが使用できるようになると実行される 5 applicationCache.onupdateready = function(){ 6 //古いキャッシュを新しいキャッシュに置き換える 7 applicationCache.swapCache(); 8 //Webページの再読み込み 9 location.reload(true); 10 } 11}
5)"https://localhost/manitest.html"でアクセスして上記1)で記載した"変更前”
が表示されることを確認
6)"cachemanifest.appcache"のコメントのみ記載して更新
7)1)のHTMLの"更新前"を"更新後"に修正しF5を押下してリロード。
上記の動作で、マニュフェストではキャッシュの"manitest.html"を参照する設定にしている
はずでなので、"manitest.html"を修正しても、Webサーバ側の修正結果は反映されずに
"更新前"が表示されるかと思いましたが、"更新後"と表示されており、Webサーバ側のHTMLが
参照されている動作となりました。
上記の動作から考えると、コメント修正のみを含めてマニュフェストすると必ず、Webサーバ側のファイルが参照
されるならば、マニュフェストでの"CACHE MANIFEST"の定義は無意味なように思えます。
因みにですが、マニュフェストの修正をかけずに、manitest.htmlのみを修正した場合は、
修正した内容は反映されずに、修正前のキャッシュの内容が表示されていますので、キャッシュ動作はしております。
どなたか、このキャッシュマニュフェストの動作設定について、ご教示いただければ幸いです
よろしくお願いします
回答2件
あなたの回答
tips
プレビュー