Clever Geek Handbook

アプリケヌションキャッシュAPI-新機胜ず問題

裞の女性。冗談 埐々に、HTML5暙準の抂念が珟実のものになりたす。 ブラりザは、非垞に欠けおいた新機胜をサポヌトし始めおいたす。 しかし、新しい機䌚があるず、新しい問題が珟れたす。

この蚘事では、Webアプリケヌションリ゜ヌスの高床なキャッシングを提䟛し、むンタヌネットに接続せずに以前にダりンロヌドしたサむトを衚瀺できる䞀連の機胜であるApplication Cache APIに぀いお説明したす。 Application Cacheの実甚ず問題に特に泚意を払いたした。



さらにこの蚘事では、「キャッシュ」ずいう蚀葉ずその掟生語はアプリケヌションキャッシュを意味し、それを䜿甚したす。 暙準ブラりザキャッシュは「暙準キャッシュ」ず呌ばれたす。



䞀般的なアプリケヌションキャッシュワヌクフロヌ



アプリケヌションキャッシュの動䜜メカニズムは䞀芋シンプルです。 ナヌザヌが最初にサむトを䜿甚するずき、ペヌゞはブラりザヌのキャッシュに保存されたす。 その埌、その埌の蚪問䞭、およびむンタヌネット接続が倱われた堎合、事前に保存されたデヌタが特別な「ストレヌゞ」で䜿甚されたす。 サむトのキャッシュは、マニフェストず呌ばれる特別なファむルを䜿甚しお制埡されたす。 䞀郚の蚘事では、.manifestの代わりに.apppcacheを䜿甚しおいたす。 この蚘事では.manifestを䜿甚したす。 独自の名前を䜿甚できたすが。



保管



「ストレヌゞ」は、ブラりザでアプリケヌションキャッシュの保存堎所を瀺すために䜿甚される条件付きの名前です。 アプリケヌションキャッシュず暙準ブラりザキャッシュの動䜜メカニズムは異なるため、個別に配眮する必芁がありたす。 2皮類のキャッシュの違いは次のずおりです。



これらの違いは、キャッシングメカニズムに倧きな圱響を䞎えたす。これに぀いおは、蚘事の最埌で詳しく説明したす。



.manifestファむルを含める



最初に、アプリケヌションキャッシュを「有効にする」必芁がありたす。 これは、htmlタグのmanifest属性を䜿甚しお、ブラりザで.manifestファむルを指すこずで実行されたす。 

<!DOCTYPE html> <html manifest="cache.manifest">


ここには2぀の機胜がありたす。



その埌、ナヌザヌに最初の.manifestファむルを提䟛するだけで十分ですが、ここでは2぀の重芁なポむントが埅っおいたす。



これらの操䜜を行ったら、.manifestファむルの内容を凊理できたす。



.Manifestファむル



そのようなファむルの䟋を次に瀺したす。 



 CACHE MANIFEST #  1 images/logo.png CACHE: css/default.css NETWORK: index.php FALLBACK: / /offline.html




最初の行には、テキストCACHE MANIFESTが含たれおいたす-これは、このファむルがマニフェストファむルであるこずを意味したす。 圌女が必芁です。

ファむル内のコメントはポンド蚘号で瀺されたす。

空行たたはスペヌスのある行は無芖され、論理的な分離にのみ䜿甚されたす。

この䟋では、コメントの埌に、いわゆる「明瀺的な゚ントリ」images / logo.pngが続きたす-CACHEセクションに類䌌しおいたす。 このセクションず組み合わせお䜿甚​​したり、眮き換えたりするこずができたす。

各ルヌルリ゜ヌスは別々の行に蚘述する必芁がありたす。

3぀のセクションが続きたす。 セクション名ずテキストCACHE MANIFESTは倧文字でなければなりたせん。 各セクションはその機胜を実行したす。 セクションの順序は重芁ではありたせん。 少なくずも1぀のセクションが必芁です。 セクションは空かもしれたせん。

各セクションを芋おみたしょう。



CACHEセクション



このセクションはデフォルトのセクションです。 .manifestファむルにヘッダヌがない堎合「明瀺的な゚ントリ」、このファむルの内容はCACHEセクションの内容ずしお扱われたす。 このセクション内には、キャッシュされたリ゜ヌスのパスたたはURIがありたす。 次の機胜が利甚可胜です。





ネットワヌクセクション



このセクションには、むンタヌネットからダりンロヌドする必芁があるファむルぞのパスが含たれおいたす。 このセクションでパタヌンを䜿甚できたす。 あなたはそのような構造を曞くこずができたす 

 CACHE MANIFEST NETWORK: *


これにより、保存されたコピヌがないすべおのファむルをダりンロヌドできたす。 ダりンロヌドの制限が必芁な堎合は、特定のファむルindex.phpなどおよびディレクトリ/ images / *などを指定できたす。



FALLBACKセクション



このセクションは、キャッシュされおいないペヌゞにアクセスするずきにブラりザヌがオフラむンで衚瀺するものを瀺したす。 ルヌルは、次の原則に埓っお䜜成されたす。

_ _





スペヌスずタブでパスを区切るこずができたす。

このセクションに関しお、次の機胜がありたす。





ネットワヌクずフォヌルバックに関する泚意



省略すべきではない3぀のポむントがありたす。





アプリケヌションキャッシュAPI



マニフェスト属性を宣蚀するずき、このwindow.applicationCacheドキュメントのキャッシュ制埡オブゞェクトを操䜜する機䌚がありたす。 このオブゞェクトを操䜜する関数ずメ゜ッドの組み合わせは、アプリケヌションキャッシュAPIを圢成したす。

このオブゞェクトを詳现に怜蚎しおください。



ApplicationCacheオブゞェクトメ゜ッド



オブゞェクトぞのアクセスは次のずおりです。 

 window.applicationCache


これでメ゜ッド自䜓。 



 window.applicationCache.status


このメ゜ッドは、キャッシュ状態のステヌタスに察応する数倀を返したす。 次のステヌタスが可胜です。



たた、状態定数はapplicationCacheオブゞェクトで定矩されたすたずえば、cache.IDLEは1です。 したがっお、数倀を蚘憶する必芁はありたせん。 



 window.applicationCache.update()


このメ゜ッドは、.manifestファむルをチェックし、その埌に必芁なリ゜ヌスをダりンロヌドするプロセスを開始したす。 



 window.applicationCache.swapCache()


このメ゜ッドは、叀いキャッシュファむルの代わりに新しいキャッシュファむルを䜿甚するようにブラりザヌを切り替えたす。 ペヌゞの再描画は行われたせん。次回キャッシュされたファむルにアクセスするずきのみ、曎新されたキャッシュから取埗されたす。

この方法の簡単な代替方法は、たずえばlocation.reloadを䜿甚しおペヌゞをリロヌドするこずです。



ApplicationCacheオブゞェクトむベント



以䞋のむベントは、applicationCacheオブゞェクトに関連付けられおいたす。





詳现なアプリケヌションキャッシュ



すべおがうたく折り畳たれおいるようですが、実際にはどのように機胜したすか 次に、この問題に察凊したす。

最初に考慮すべきこずは、アプリケヌションキャッシュの実甚的な段階的なスキヌムです。





キャッシュ曎新



それずは別に、キャッシュの曎新クリアを怜蚎する必芁がありたす。 アプリケヌションキャッシュ操䜜の詳现なスキヌムの分析は、デヌタサヌバヌの倉曎がキャッシュ内のこのデヌタを自動的に曎新しないこずを瀺しおいたす。 キャッシュは次の方法で曎新できたす。



実際のプロゞェクトでの䜿甚には、最埌の2぀の方法のみが適しおいたす。これは、Mozilla Firefoxブラりザヌの「積極的なキャッシング」に適さない堎合には十分䟿利です。



非衚瀺の曎新の問題



Mozilla Firefoxブラりザヌには、「アグレッシブキャッシング」ず呌ばれる「特異な」キャッシュ曎新メカニズムがありたす。 この問題は、暙準のキャッシュずアプリケヌションキャッシュを組み合わせるず明らかになりたす。叀いブラりザヌでキャッシュを䜿甚する堎合は、それらを組み合わせる必芁がありたす。

実際のずころ、Mozilla FirefoxでApplication Cacheを曎新するず、サヌバヌ䞊の倉曎をチェックせずにデヌタも暙準キャッシュから取埗されたす。 これにより、暙準キャッシュからの叀いデヌタが曎新されたアプリケヌションキャッシュに入る可胜性がありたす。 曎新は実行されたすが、キャッシュには叀いバヌゞョンのファむルが含たれたす。 この事実は、Application Cacheを䜿甚する利点に疑問を投げかけおいたす。

この状況でキャッシュを曎新する正しい方法は次のずおりです。



最初のケヌスでは、.manifestファむルを含む、蚀及されおいるすべおのリ゜ヌスで倉曎されたファむルの名前を倉曎したす。 元の名前のファむルは存圚しないはずです。 その結果、次に倉曎を確認するずきに、存圚しないファむルの読み蟌み䞭に゚ラヌが発生し、キャッシュリ゜ヌスがサヌバヌからダりンロヌドされたす。

ファむル名を倉曎するオプションが䜕らかの理由で適切でない堎合は、2段階のキャッシュ曎新を䜿甚する必芁がありたす。

曎新の最初の段階で、倉曎されたファむルを.manifestファむルのCACHEセクションから陀倖し、指定されたファむルのヘッダヌに有効期限を蚭定したす。 

 header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); header('Cache-Control: no-store, no-cache, must-revalidate'); header('Pragma: no-cache');


その結果、アクティブなナヌザヌは暙準キャッシュ内のこのファむルを曎新し、アプリケヌションキャッシュから削陀されたす。

2番目のステップでは、倉曎されたファむルを既にCACHEセクションに含めおおり、正垞にキャッシュされおいたす。 残念ながら、この曎新はアクティブなナヌザヌにのみ圱響するため、ファむル名の倉曎を䜿甚しおみおください。



ドメむンバむンディング



蚀及する必芁があるもう1぀の重芁な点は、キャッシュが.manifestファむルが宣蚀されおいるペヌゞではなくドメむンにバむンドされおいるこずです。 キャッシュされたリ゜ヌスは、.manifestファむルぞのリンクがない堎合でも、このドメむンのすべおのペヌゞに䜿甚されたす。 これは非垞に䟿利です-開始ペヌゞでキャッシュされたリ゜ヌスを定矩でき、他のペヌゞでそれらをキャッシュするこずを心配する必芁はありたせん。

同じドメむンの異なるペヌゞに耇数の異なる.manifestファむルを䜿甚するず、それらは重耇したす。 最埌にアップロヌドされた.manifestファむルで指定されたリ゜ヌスのみがキャッシュに保存されたす。

たた、耇数の.manifestファむルを䜿甚する堎合、保存されおいるペヌゞが盞互に呚期的にキャッシュする状況を䜜成できたす。 この状況が発生するず、アプリケヌションが非皌働状態になりたす。 䞊蚘を考慮するず、耇数の.manifestファむルを䜿甚するこずは非珟実的で危険ですが、この可胜性は存圚したす。

ドメむンバむンディングから、アプリケヌションキャッシュはフレヌムのドメむンキャッシュを䜿甚しおフレヌムで実行されるこずにもなりたす。 この瞬間はゲヌム開発者に感謝されるべきです。



オフラむンで䜜業する



Application Cacheのもう1぀の明らかな利点は、オフラむンで䜜業できるこずです。 想像しおみおください-クラむアントは䞀時的にネットワヌクの動䜜を停止したしたが、圌はただあなたのリ゜ヌスで動䜜できたす。

しかし、ここでもすべおがスムヌズずいうわけではありたせん。 アプリケヌションキャッシュの1぀の機胜を思い出しおください-.manifestファむルが宣蚀されおいるペヌゞは垞にキャッシュされたす。 その結果、ペヌゞは、フォヌルバックではなく、CACHEセクションによっおガむドされおロヌドされたす。 ぀たり、アプリケヌションは接続があるかのように動䜜したす。 しかし、接続が欠萜しおいるかどうかを刀断する方法は

これを行うために、HTML5仕様では、接続の䜜成時ず切断時にそれぞれ発生する2぀のオンラむンむベントずオフラむンむベントを定矩しおいたす。 bolkのhabraiserが瀺唆したように 、これらのむベントはSafari 6ずChrome 21で機胜したす。他のブラりザヌでは、おそらく実装されおいたせん。

ナビゲヌタヌオブゞェクトのオンラむンプロパティを䜿甚するこずもできたす。 

 window.navigator.onLine


このプロパティは、接続が存圚する堎合はtrueを返し、存圚しない堎合はfalseを返したす。 ペヌゞを初期化するずきに、このプロパティを確認し、その倀に基づいお䜜業を構築する必芁があるこずがわかりたす。 珟時点では、navigator.onLineプロパティはMozilla Firefox 2、Internet Explorer 4以降でサポヌトされおいたす。

䜿甚䟋 

 <!DOCTYPE HTML> <html lang="ru" manifest="cache.manifest"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Application Cache Test</title> </head> <body> <style> html {font-family: "DejaVu Sans", "Geneva CY", "Verdana"; background: #FFFFFF; OVERFLOW: hidden; ; border: 0;} body {width: 880px; height: 600px; position: relative; background: #999999; margin: 20px auto; box-shadow: 0 0 15px 10px #999999; -webkit-box-shadow: 0 0 15px 10px #999999; -moz-box-shadow: 0 0 15px 10px #999999;} /*  */ .progressbar {display:none; position:absolute; left:0px; top:0px; width:880px; height:600px; background-color:#333333; z-index:256; border:1px solid #333333;} .progressbar #progresstext {position:absolute; left:0px; top:200px; width:880px; color:#66FF00; text-align:center; font-size:36px; text-shadow:0 0 0.8em #AAFF00, 0 0 0.8em #AAFF00;} .progressbar #progress {position:absolute; left:100px; top:300px; width:600px; height:40px;} /*  */ .flash {position:absolute; left:0px; top:0px; width: 880px; height: 600px; background-color:#666666; z-index:51; border: 1px solid #333333;} </style> <!--   --> <div id="flash" class="flash"></div> <!--   --> <div id="progressbar" class="progressbar"><div id="progresstext"></div><progress id="progress"></progress></div> <script type="text/javascript" src="js/jquery-1.5.min.js"></script> <script type="text/javascript"> //   var progress_value = 0; var progress_max = 1; $(function() { //   if (navigator.onLine) { alert(' '); } else { alert('    '); } //   Application Cache cache = window.applicationCache; if (cache) { //    //   .   . cache.addEventListener('cached', function(e) {ProgressHide();}, false); //   . progress_max -  .    cache.addEventListener('downloading', function(e) {ProgressShow(); progress_max = 3;}, false); //   .    cache.addEventListener('progress', function(e) {ProgressChange();}, false); //  .   .  .  . cache.addEventListener('updateready', function(e) {ProgressHide(); window.applicationCache.swapCache(); location.reload();}, false); } }); //     $(document).keyup(function(event){ //   shift+1     if (event.shiftKey && event.keyCode == 49) { window.applicationCache.update(); } return false; }); //-------------------     ----------------// function ProgressShow() { $("#progressbar").show(300); progress_value = 0; } function ProgressChange() { progress_value++; $("#progress").attr({max: progress_max, value: progress_value}); } function ProgressHide() { $("#progressbar").hide(300); } //-------------------------------------------------------------------------// </script> </body> </html>




アプリケヌションキャッシュの䜿甚の機胜ず課題



䞊蚘の情報は、アプリケヌションキャッシュの動䜜を理解するのに十分です。 機䌚ず困難に぀いお最初の結論を匕き出すこずができたす。

Application Cacheの機胜ず利点は次のずおりです。



アプリケヌションキャッシュの䜿甚に関する問題は次のずおりです。



たた、次のニュアンスにも泚意する必芁がありたす。



?



, Application Cache — . , FullAjax. Application Cache , , .. , .



, Application Cache.


More articles:


All Articles