HTML5 の新機能: オフラインキャッシュテクノロジ - php 中国語 Web サイト-htmlチュートリアル-php.cn

1. オフラインキャッシュの原因。

HTML5 以前の Web ページはすべてコネクションレスであり、アクセスするにはインターネットに接続する必要があります。実際、これは PC 時代には大きな問題ではありませんでしたが、モバイルインターネット時代には

。

デバイスの端末の位置は固定されなくなり、無線信号に依存すると、ネットワークの信頼性が低下します。たとえば、電車に座ってトンネルを通過すると (15 分)、アクセスできなくなります。非常に不便なウェブサイト。

そして、オフライン Web アプリケーションを使用すると、オフラインでも Web サイトと対話できるようになります。

2. オフライン Web アプリケーションとは何ですか?なぜオフライン Web アプリケーションを開発するのでしょうか?

オフライン Web アプリケーションとは、クライアントが Web アプリケーションサーバーとローカル接続していないときに、Web アプリケーションをクライアント上でローカルに使用して関連する操作を実行できることを意味します。

Web アプリケーションはますます複雑になり、多くの分野で Web アプリケーションが活用されています。ただし、これには致命的な欠陥があります。ユーザーがインターネットに接続できない場合、この Web アプリケーションを利用することはできません

。したがって、H5 では、ローカルキャッシュメカニズムを使用してこの問題を解決し、オフラインアプリケーションの開発を可能にする新しい API を追加しました。

オフラインでも Web アプリケーションを正常に動作させたい場合は、HTML ファイル、CSS ファイル、JavaScript スクリプト

ファイルなど、Web アプリケーションを構成するすべてのリソースファイルをローカルキャッシュに配置する必要があります。サーバーがインターネットに接続できない場合は、ローカルキャッシュ内のリソースファイルを使用して Web アプリケーションを通常どおり実行することもできます。

3. ローカルキャッシュとは何か、ローカルキャッシュとブラウザーの Web キャッシュの違い。

Web アプリケーションのローカルキャッシュとブラウザーの Web ページキャッシュの間には、多くの点で明らかな違いがあります。

1. ローカルキャッシュは Web アプリケーション全体に対応しますが、ブラウザーの Web ページキャッシュは 1 つの Web ページのみに対応します。どの Web ページにも Web キャッシュがあります。ローカルキャッシュは、キャッシュ

で指定されたページをキャッシュします。

2. Web ページにどの Web ページがキャッシュされているか、Web ページ上のどのリソースがキャッシュされているかがわからないため、Web ページのキャッシュは安全ではなく信頼性も高くありません。ローカルキャッシュは信頼性が高く、どのコンテンツをキャッシュするか、どのコンテンツをキャッシュしないかを制御できます。開発者は、プログラミング手法を使用してキャッシュの更新を制御したり、キャッシュオブジェクトのさまざまな属性、状態、イベントを使用して、より強力なオフライン

アプリケーションを開発したりすることもできます。

3. (一部の) ブラウザは、Web サイトの読み込みを高速化するために独自のキャッシュファイルを積極的に保存します。ただし、ブラウザーのキャッシュを実装するには、満たさなければならない前提条件があります。つまり、ネットワークが接続を維持する必要があります

。ネットワークが接続されていない場合、

ブラウザでサイトのキャッシュが有効になっていても、サイトを開けることはできません。エラーメッセージのみが表示されます。オフライン Web アプリケーションを使用すると、どのファイルを Web サイトサーバーから取得またはキャッシュする必要があるかをブラウザに能動的に指示でき、ネットワークがオフラインでも Web サイトにアクセスできます。

4. HTML5 アプリケーションのキャッシュを実装するにはどうすればよいですか?マニフェストファイルとは何ですか? ファイル内で指定されたどのコンテンツをローカルにキャッシュする必要がありますか?どのコンテンツをローカルにキャッシュする必要はありませんか?

HTML5 アプリケーションキャッシュの実装は非常に簡単で、必要な手順は 3 つだけで、API は必要ありません。どのファイルをオフラインでキャッシュする必要があるかをブラウザーに指示し、それを実現するためにサーバーと Web ページでいくつかの

簡単な設定を行うだけです。

4-1.cache.manifest ファイルを作成し、ファイルの内容が正しいことを確認します。

4-2. サーバー上のコンテンツタイプを設定します。

4-3. すべての HTML ファイルは、cache.manifest を指します。

詳細な実装:

4-1: まず、cache.manifest という名前のファイルを作成します。Windows プラットフォームではメモ帳を使用できます (他の IDE も使用できます)。ファイルの内容は次のとおりです。

注:

1. 最初の行は、このファイルの役割をブラウザに通知する、つまり、ファイルの役割を特定するためのテキスト「CACHE DMANIFEST」である必要があります。ローカルキャッシュ内のリソースファイルの設定。

2. マニフェストファイルにコメントを追加して、必要な指示や説明を追加できます。コメント行は「#」文字で始まります。

3. CACHE の後の部分には、キャッシュする必要があるファイルがリストされます。

4. FALLBACK の後の各行に 2 つのリソースファイルを指定します。最初のリソースファイルはオンラインアクセスが可能な場合に使用されるリソースファイルであり、2 番目のリソースファイルは

がオンラインアクセスできない場合に使用されるバックアップリソースファイルです。

5. NETWORK の後に、オンラインホワイトリストを指定できます。つまり、オフラインで保存したくないファイルのリストを指定できます。これは、通常、ファイルのコンテンツが意味を持つためにはインターネットアクセスが必要となるためです。

また、この部分では、ショートカット: ワイルドカード * を使用できます。これにより、アプリケーションサーバーが表示セクションに記載されていないファイルまたは URL を取得していることがブラウザに通知されます。

4-2: サーバー上のコンテンツタイプを設定します。

オフライン Web アプリケーションを実際に実行またはテストする場合は、サーバーが text/cache-manifest MIME タイプ (h5 で指定されている) をサポートするようにサーバーを構成する必要があります

マニフェストファイルの MIME タイプは text/cache-manifest です)。たとえば、Apache サーバーを構成する場合は、

｛apache_home｝/conf/mime.type ファイル (.htaccess) を見つけて、ファイルの最後に次のコードを追加する必要があります:

text/cache-manifest .マニフェスト。 Microsoft の IIS サーバーでの手順は次のとおりです:

(1) デフォルトの Web サイトまたは追加する必要のある Web サイトを選択します。プロパティダイアログボックスが表示されます。

(2)。 http header" ラベル

(3) 。MIME マッピングで、[ファイルタイプ] ボタンをクリックします

(4)。開いた MIME タイプダイアログボックスで [新規] ボタンをクリックします

(5)。関連する拡張子に「manifest」と入力します。 text、コンテンツタイプに「manifest」と入力します。 text ボックスに「text/cache-manifest」と入力し、[OK]ボタンをクリックします。

4-3: HTMLファイルのポインティングを設定します。

<html manifest=”/cache.manifest” >

ログイン後にコピー

このステップを完了すると、Web オフラインキャッシュのすべてのステップが完了します。閲覧するファイルの内容は変更されず、ローカルに保存されるため、Web ページがより速く開くようになりました

(オンライン時でも)。

注:

1. Web サイトのすべての HTML ページで、HTML 要素のマニフェスト属性を設定する必要があります。必ず行うこと;

2. Web サイトアプリケーション全体で、cache.manifest ファイルは 1 つだけ存在できます (Web サイトのルートディレクトリに配置することをお勧めします)。 ) HTML5 オフラインキャッシュはサポートされていません。

4. 「#」で始まるコメント行は他の目的に使用できます。アプリケーションのキャッシュは、マニフェストファイルが変更されると更新されます。画像を編集したり、JavaScript 関数を変更した場合、

これらの変更は再キャッシュされません。コメント行の日付とバージョン番号を更新すると、ブラウザーにファイルが再キャッシュされます。

5. ローカルキャッシュ用の applicationCache オブジェクトとそのプロパティとイベントをマスターします:

(1) キャッシュの更新:

Web アプリケーションがキャッシュからロードされると、すべての関連ファイルも取得されたキャッシュから直接ロードされます。オンラインの場合、ブラウザーはマニフェストファイルが更新されたかどうかを非同期的にチェックします。

更新がある場合、新しいマニフェストファイルとマニフェストにリストされているすべてのファイルがダウンロードされ、プログラムキャッシュに再保存されます。ただし、ブラウザはマニフェストファイルのみをチェックし、キャッシュされたファイルが更新されたかどうかはチェックしないことに注意してください。キャッシュされた js ファイルを変更してそのファイルを有効にしたい場合は、マニフェストファイルを更新する必要があります。アプリケーションが依存するファイルリストは実際には変更されていないため、最も簡単な方法はバージョンを更新することです。

コードは次のとおりです:

CHCHE MANIFEST
CACHE:
#version<span style="color:#cc0000;">2</span> (更改这个数字以便让浏览器重新下载)
myapp.html
 myapp.css
 myapp.js

ログイン後にコピー

同じ「アンインストール」とは、ファイルをリクエストしたときに404が返されるようにサーバー側のマニフェストファイルを削除することを意味します。同時に、htmlファイルを変更します。マニフェストリストから「切断」されています。

注:

①、ブラウザのマニフェストファイルの確認とキャッシュの更新の動作は、キャッシュからアプリケーションをロードする前に行われる場合もあれば、同時に行われる場合もあります。したがって、単純な Web アプリケーション

の場合、マニフェストファイルを更新した後、最新バージョンが確実に有効になるように、ユーザーはアプリケーションを 2 回ロードする必要があります。1 回目はキャッシュから古いバージョンをロードし、次にキャッシュを更新します。 2 回目は

キャッシュから最新バージョンをロードします。

②. ブラウザーはキャッシュ更新プロセス中に一連のイベントをトリガーし、ハンドラーを登録してユーザーにフィードバックを提供することができます。

コードは次のとおりです:

  applicationCache.onupdateready= function(){
  var reload = confirm(“A new version of this application is available\n and will be used the next time you reload.\n”);
  if(reload)  location.reload();
}

ログイン後にコピー

このイベントは、ウィンドウの applicationCache 属性の値である ApplicationCache オブジェクトに登録されます。アプリケーションキャッシュをサポートするブラウザは、この属性を定義します。

(2) アプリケーションキャッシュ関連イベントの処理:

//下面所有的事件处理程序都使用此函数来显示状态消息
//由于都是通过调用status函数来显示状态，因此所有处理程序都返回false来阻止浏览器显示其默认状态消息
  function status(msg){
 doucment.getElementById(“statusline”).innerHTML= msg;
  console.log(msg); //同时在控制台输出此消息，便于调试
 }
   //每当应用程序载入的时候，都会检查该清单文件
   //也总会首先触发“checking”事件
   window.applicationCache.onchecking = function(){
      status(“checking for a new version.”);
     return false;
   }
   //如果没有改动，同时应用程序也已经缓存了
   //”noupdate”事件被触发，整个过程结束
  window.applicationCache.onnoupdate = function(){
   }
    //如果还未缓存应用程序，或者清单文件有改动
    //那么浏览器会下载并缓存清单中的所有资源
    //触发”downloading”事件，同时意味着下载过程开始
   window.applicationCache.ondownloading = function(){
        status(“Downloading new version”);
        window.progresscount = 0;
       return false;
   }
   //在下载过程中会间断性触发“progress“事件
   //通常是在每个文件下载完毕的时候
   window.applicationCache.onprogress = function(e){
        varprogress = “”;
        if(e && e.lengthComputable)
           progress = “ ”+Math.round(100*e.loaded/e.total)+”%”
       else
            progress = “(“+(++progresscount)+”)”
       return false;
  }
    //当下载完成并且首次将应用程序下载到缓存中时，浏览器会触发“cached“事件
  window.applicationCache.oncached = function(e){
       status(“Thisapplication is now cached locally”);
        return false;
  }
 
    //当下载完成并将缓存中的应用程序更新后，浏览器会触发”updaterady”事件
    //要注意的是：触发此事件的时候，用户任然可以看到老版本的应用程序
   window.applicationCache.onupdateready = function(e){
        status(“Anew version has been downloaded. Reload to run it”);
        return false;
   }
 
   //如果浏览器处于离线状态，检查清单列表失败，则会触发“error“事件
   //当一个未缓存的应用程序引用一个不存在的清单文件，也会触发此事件
   window.applicationCache.onerror = function(e){
        status(“Couldn’tload manifest or cache application”);
        return false;
  }
    //如果一个缓存的应用程序引用一个不存在的清单文件，会触发“obsolete“
   //同时将应用从缓存中移除之后不会从缓存而是通过网络加载资源
   window.applicationCache.onobsolete = function(e){
        status(“Thisapplication is no longer cached. Reload to get the latest version from thenetwork.”);
        return false;
   }

ログイン後にコピー

マニフェスト属性を持つ HTML ファイルがロードされるたびに、ブラウザは「チェック」イベントをトリガーします。そして、ネットワーク経由でマニフェストファイルを読み込みます。ただし、その後、さまざまな状況に応じてさまざまなイベントがトリガーされます。

イベントリスト:

(1)。利用可能なアップデートはありません。

アプリケーションがキャッシュされ、マニフェストファイルが移動されていない場合、ブラウザは noupdate イベントをトリガーします

(2)。アプリケーションがキャッシュされている場合、またマニフェスト要素が変更された場合、ブラウザーはダウンロードイベントをトリガーし、マニフェストファイルにリストされているすべてのリソースのダウンロードとキャッシュを開始します。

ダウンロードプロセスが進行すると、ブラウザは「progress」イベントもトリガーし、ダウンロードが完了すると「updateready」イベントもトリガーされます。

(3). 新しいアプリケーションを初めてロードします

アプリケーションがキャッシュされていない場合は、上記のようにダウンロードイベントと進行状況イベントがトリガーされます。ただし、ダウンロードが完了すると、ブラウザーは updateready イベント

の代わりに「キャッシュされた」イベント

を発生させます (4) ブラウザーはオフラインです

ブラウザーがオフラインの場合、マニフェストファイルとその間、「エラー」イベントがトリガーされます。

キャッシュされていないアプリケーションが存在しないマニフェストファイルを参照している場合、ブラウザもこのイベントをトリガーします

(5) マニフェストファイルが存在しません

ブラウザがオンライン状態を処理し、アプリケーションがキャッシュされている場合、しかし、マニフェストファイルが存在しないため、ブラウザは古いイベントをトリガーし、アプリケーション

をキャッシュから削除します。

キャッシュステータス:

缓存的状态可以通过window.applicationCache.status获得，其状态主要包括如下6种：

const unsigned short UNCACHED=0;//未缓存(应用程序没有设置manifest属性：未缓存)
const unsigned short IDLE=1;//空闲状态(清单文件已经检查完毕，并且已经缓存了最新的应用程序)  
const unsigned short CHECKING=2;//检查中(浏览器正在检查清单文件)  
const unsigned short DOWNLOADING=3;//下载中(浏览器正在下载并缓存清单中列举的所有文件)
const unsigned short UPDATEREADY=4;//更新准备中(已经下载和缓存了最新版的应用程序)
const unsigned short OBSOLETE =5;//过期状态(清单文件不存在，缓存将被清除)  
readonly attribute unsigned short status;

ログイン後にコピー

六、ApplicationCache对象还定义了两个方法update()和swapCache()：

(1).update

显式调用了更新缓存算法以检测是否有最新版本的的应用程序。这导致浏览器检测同一个清单文件（并触发相同的事件），

这和第一次载入应用程序时的效果是一样的。

(2).swapCache

它告诉浏览器可以弃用老缓存，所有的请求都从新缓存中获取。注意，这并不会重新载入应用程序：所有已经载入的html文件

、图片、脚本等资源都不会改变。但是，之后的请求将从最新的缓存中获取。这会导致“版本错乱”的问题，因此一般不推荐使用

，除非应用程序设计得很好，确保这样的方式没有问题。只有ApplicationCache.UPDATEREADY和

ApplicationCache.ABSOLETE 时调用 swapCache()才有意义（当状态OBSOLETE时，调用它可以立即弃用废弃的缓存，

让之后所有的请求都通过网络获取）。如果状态属性是其他数值的时候调用swapCache()方法，它就会抛出异常。

七、如何判断在线还是离线状态？

离线web应用指的是将自己“安装”在应用程序缓存中的程序，使得哪怕在浏览器处于离线状态时依然可访问它。为了在离线状态可用，

Web应用需要可以告知别人自己是离线还是在线，同时当网络连接的状态发生改变时候也能“感知”到。通过navigator.onLine属性，

navigator.onLine是HTML5定义用来检测设备是在线还是离线。对应的值为false或true。但是不同浏览器表现并不一致。

IE 6+和Safari 5+能够正确的检测到网络已断开，并将navigator.onLine设为flase。

Firefox 3+和Opera 10.6+也支持navigator.onLine。但需要手动讲浏览器设置为脱机模式才能让浏览器正常工作。

Chrome 11及以上版本始终将navigator.onLine设为true。(不过作者的Chrome 21已经能正常使用了)

HTML5定义了online&offline事件用于监听网络状态变化。

window.addEventListener('online', callback); // 离线到上线

window.addEventListener('offline', callback); // 上线到离线

目前除了IE（IE只支持navigator.onLine属性）外，其他最新浏览器都支持这个事件。

八、离线Web应用实战。

通过一个简单的记事本程序——PermaNote，来解释如何使用。程序将用户的文本保存到localStorage中，并且在网络连接可用的时候，

将其上传到服务器，PermaNote只允许用户编辑单个笔记。

PermaNote应用包含3个文件，一个应用清单文件、一个html页面文件，一个实现逻辑的js文件。

Demo: http://xuanfengge.com/demo/201506/appcache/permanote.html

①.premanote.appcache部分：

 CACHE MANIFEST
#  PermaNote v8
permanote.html
permanote.js
NETWORK:
note

ログイン後にコピー

②.permanote.html部分：

<!DOCTYPEHTML>
<html manifest= permanote.appcache”>
<head>
<title>PermaNote Editor</title>
<script src=” permanote.js”></script>
<style type=”text/css”>
#editor {width:100%;height:250px}
#statusline{width:100%}
</style>
</head>
<body>
<p id=”toobar”>
<button id=”savebutton”onclick = “save()”>save</button>
<button onclick = “sync()”>SyncNote</button>
<button onclick = “applicationCache.update()”>UpdateApplication</button>
<textarea id=”editor”></textarea>
<p id=”statusline”></p>
</p>
</body>
</html>

ログイン後にコピー

③.permanote.js部分

status()函数用于显示状态栏消息，save()函数将笔记本保存到服务器，sync()用于确保本地与服务器文本的同步。

应用程序的时间处理程序解释：

(1).onload

尝试和服务器同步，一旦有新版本的笔记并且完成同步后，就启用编辑器窗口。

save()和sync()函数发出HTTP请求，并在XMLHttpRequest对象上注册一个onload时间处理程序来获取上传或者

下载完成的提醒。

(2).onbeforeunload

在未上传前，把当前版本的笔记数据保存到服务器上。

(3).oninput

每当textarea输入框内容发生变化时，都将其内容保存到localStorage中，并启动一个计时器。当用户停止编辑超过5秒