HTML5でアプリケーションキャッシュを実装するにはどうすればよいですか?オフラインストレージテクノロジの簡単な説明-H5 チュートリアル-php.cn

HTML5でアプリケーションキャッシュを実装するにはどうすればよいですか?オフラインストレージテクノロジの簡単な説明

青灯夜游

リリース： 2018-09-08 17:07:42

オリジナル

1598 人が閲覧しました

この章では、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 &#39;UNCACHED&#39;; 
　　　　break; 
　　case appCache.IDLE: // IDLE == 1 
　　　　return &#39;IDLE&#39;; 
　　　　break; 
　　case appCache.CHECKING: // CHECKING == 2 
　　　　return &#39;CHECKING&#39;; 
　　　　break; 
　　case appCache.DOWNLOADING: // DOWNLOADING == 3 
　　　　return &#39;DOWNLOADING&#39;; 
　　　　break; 
　　case appCache.UPDATEREADY: // UPDATEREADY == 4 
　　　　return &#39;UPDATEREADY&#39;; 
　　　　break; 
　　case appCache.OBSOLETE: // OBSOLETE == 5 
　　　　return &#39;OBSOLETE&#39;; 
　　　　break; 
　　default: 
　　　　return &#39;UKNOWN CACHE STATUS&#39;; 
　　　　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&#39;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 サイトの他の関連記事を参照してください。

HTML5でアプリケーションキャッシュを実装するにはどうすればよいですか?オフライン ストレージ テクノロジの簡単な説明

HTML5でアプリケーションキャッシュを実装するにはどうすればよいですか?オフラインストレージテクノロジの簡単な説明