この章では、html5を使用してアプリケーションキャッシュを実装する方法を紹介します。オフライン ストレージ テクノロジーについて簡単に説明します。困っている友人は参考にしていただければ幸いです。
HTML5 が登場する前は、ページにアクセスするにはインターネットに接続する必要がありました。しかし、モバイルインターネットの台頭により、デバイス端末の位置は固定されなくなりました。モバイル デバイスは無線信号に大きく依存していますが、無線ネットワークの信頼性は不安定です。たとえば、トンネルを通過したり、信号強度が弱い場所では Web サイトにアクセスできなくなります。これは間違いなくユーザー エクスペリエンスに悪いため、HTML5 でのオフライン キャッシュは危険です。 (applicationCache) はこの問題を解決します。
1: オフライン キャッシュとは何ですか
applicationCache とも呼ばれる HTML5 オフライン キャッシュは、HTML5 の新機能の 1 つです。簡単に理解すると、最初のロード後にデータがキャッシュされ、次回はネットワークなしでロードできます。 Web ページやゲームを静的データと比較するのに使いやすい。もちろん、Html5 のすべての新しいブラウザーがこれをサポートできるわけではありません。オフライン キャッシュについても同様です。いずれにせよ、IE9 (含む) および IE9 以下のブラウザは現在サポートされていません。モバイルで使用する場合はサポートされる必要があります。オフライン キャッシュがサポートされているかどうかを検出することも比較的簡単です。
<script>
if(window.applicationCache){
alert("支持离线缓存");
}
else{
alert("不支持离线缓存");
}
</script>ログイン後にコピー
二: 使い方
HTML5 オフライン キャッシュはブラウザのキャッシュとは別のキャッシュ領域で、このキャッシュにデータを保存したい場合は、ダウンロードされキャッシュされたものを一覧表示する記述ファイル (.manifest) を使用する必要があります。リソース。
1. マニフェスト ファイルを導入します
<!DOCTYPE html>
<html>
<head>
<!--就是在这里引入，注意引入也是讲究路劲跟文件名的，
这里文件名是test，后缀是mainfest，路劲在当前的html下面
（一般放在html当前文件夹下面也没什么问题，我是这么放的）-->
<html manifest="test.manifest">
<meta charset="UTF-8">
<title>html5 离线缓存</title>
</head>
<body>
</body>
</html>ログイン後にコピー
2. 導入が完了したら、次のステップは test.mainfest ファイルのコードを記述します。
マニフェスト ファイルは、何がキャッシュされているか (何がキャッシュされていないのか) をブラウザーに伝える単純なテキスト ファイルです。
マニフェスト ファイルは 3 つの部分に分割できます:
①キャッシュマニフェスト - この見出しの下にリストされているファイルは、最初のダウンロード後にキャッシュされます
②ネットワーク - この見出しの下にリストされているファイルはサーバーへの接続が必要であり、キャッシュされません
③FALLBACK - このタイトルの下にリストされているファイルは、ページにアクセスできない場合（404 ページなど）のフォールバック ページを指定します
完全なコード
CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
m.png
test.js
test.css
NETWORK:
*
FALLBACK
online.html offline.htmlログイン後にコピー
マニフェスト ファイルは正しい MIME タイプ、つまり「テキスト」で構成する必要があります/cache-manifest" 、これは Web サーバー上で構成されます。
分析:
# で始まる行はコメントを表します。 CACHE の下のファイルはすべてキャッシュされたファイルです。NETWORK は、指定されたファイルがネットワークから要求されてキャッシュされるたびに、常に最新のファイルをネットワークから要求することを意味します。 FALLBACK: 指定されたファイルが見つからない場合は、新しいアドレスにリダイレクトされます。標準はすべて大文字で表記されます。
3. JS を通じて更新を動的に制御します
次のいずれかが発生しない限り、アプリはオフラインになった後もキャッシュされたままになります:
ユーザーが Web サイトのブラウザーのデータ ストレージをクリアします。
マニフェストファイルが変更されました。
注意: マニフェストにリストされているファイルを更新しても、ブラウザーがリソースを再キャッシュするわけではありません。マニフェスト ファイル自体を変更する必要があります。
1) キャッシュのステータス: window.applicationCache オブジェクトは、ブラウザーのアプリケーション キャッシュへのプログラムによるアクセス方法です。その status プロパティを使用して、キャッシュの現在のステータスを表示できます。
applicationCache.status の値は次のとおりです:
0 === キャッシュされていません
1 === アイドル (キャッシュは最新の状態)
2 === 検査中
3 === ダウンロード中
4 === アップデートの準備ができました
5 === キャッシュの有効期限
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};ログイン後にコピー
2) キャッシュをアクティブに更新します: applicationCache.update()
<script> //利用定时器隔一定时间自动更新一下缓存
setInterval(function(){
applicationCache.update();
},50000);</script>ログイン後にコピー
プログラムでキャッシュを更新するには、最初に applicationCache.update() を呼び出してください。この操作では、ユーザーのキャッシュの更新が試行されます (マニフェスト ファイルが変更されている場合)。最後に、applicationCache.status が UPDATEREADY 状態の場合、applicationCache.swapCache() を呼び出して、元のキャッシュを新しいキャッシュに置き換えます。
var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user's cache.
...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.ログイン後にコピー
4. シンプルなオフライン キャッシュ アプリケーション
4 つのファイルを含む Web プロジェクト AppCache を構築します:
appcache_offline.html
<html manifest="test.manifest">
<head>
<title>AppCache Test</title>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
</head>
<body>
<p><output id="test"></output></p>
<div id="log"></div>
</body>
</html>
ログイン後にコピー
マニフェスト ファイル: test.manifest
CACHE MANIFEST
#VERSION 1.0
CACHE:
test.css
ログイン後にコピー
test.css
output { font: 2em sans-serif; }ログイン後にコピー
test .js
りー
以上がHTML5でアプリケーションキャッシュを実装するにはどうすればよいですか?オフライン ストレージ テクノロジの簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
