オフライン Web アプリケーション開発のサポートは、HTML5 のもう 1 つの焦点です。いわゆるオフライン Web アプリケーションは、デバイスがインターネットにアクセスできない場合でも実行できるアプリケーションです。
オフライン Web アプリケーションを開発するには、いくつかの手順が必要です。 1 つ目は、次に正しいアクションを実行できるように、デバイスがインターネットにアクセスできるかどうかをアプリが認識していることを確認することです。さらに、アプリケーションが適切に動作するには、特定のリソース (画像、JavaScript、CSS など) にもアクセスできる必要があります。最も良いのは、ユーザーがデータを保存するためのローカル領域が必要であり、インターネットにアクセスできるかどうかに関係なく、読み取りと書き込みが妨げられないことです。
HTML5 とその関連 API により、オフライン アプリケーションの開発が現実になります。
オフライン検出デバイスがオンラインかオフラインかを知るために、HTML5 は navigator.onLine 属性を定義します。値が true の場合はデバイスがインターネットにアクセスできることを示し、値が false の場合はデバイスがオフラインであることを示します。
if (navigator.onLine) { // 通常通りに動作する} else { // オフライン状態でタスクを実行する}navigator.onLine には特定の互換性の問題があるため、navigator.onLine 属性に加えて、ネットワークが利用可能かどうかをより適切に判断するために、HTML5 ではオンラインとオフラインの 2 つのイベントも定義されています。
これら 2 つのイベントは、ネットワークがオフラインとオンラインの間で切り替わるときに、ウィンドウ オブジェクトでトリガーされます。
window.addEventListener('online', function() { // 正常に動作します}); window.addEventListener('offline', function() { // オフライン時にタスクを実行します});実際のアプリケーションでは、ページがロードされた後に navigator.onLine を通じて初期状態を取得するのが最善です。次に、上記 2 つのイベントを使用して、ネットワーク接続ステータスが変化したかどうかを判断します。上記のイベントがトリガーされると、navigator.onLine プロパティの値も変更されますが、ネットワーク ステータスの変化を検出するには、このプロパティを手動でポーリングする必要があります。
アプリケーションキャッシュHTML5 のアプリケーション キャッシュ (略して appcache) は、オフライン Web アプリケーションの開発用に特別に設計されています。 Appcache は、ブラウザのキャッシュから分離されたキャッシュ領域です。このキャッシュにデータを保存するには、ダウンロードしてキャッシュするリソースをリストしたマニフェスト ファイルを使用します。説明ファイルの例:
キャッシュマニフェスト# Commentfile.jsfile.css
次に、HTMLで引用します。
<html マニフェスト=./xxx.manifest>
xxx.manifest ファイルの MIME タイプは text/cache-manifest である必要があります。
この API の中核は applicationCache オブジェクトです。このオブジェクトには status 属性があり、アプリケーション キャッシュの次の現在のステータスを示します。
関連イベント：
一般に、これらのイベントは、ページの読み込み時に上記の順序でトリガーされます。上記のイベントは、update() メソッドを呼び出して手動でトリガーすることもできます。
データストレージクッキーHTTP Cookie (通常は直接 Cookie と呼ばれます) は、クライアントでセッション情報を保存するために使用されます。この標準では、サーバーは、HTTP 要求への応答の一部として、セッション情報を含む Set-Cookie HTTP ヘッダーを送信する必要があります。サーバー応答ヘッダーの例:
HTTP/1.1 200 OK
コンテンツタイプ: テキスト/html
Set-Cookie: 名前=値
その他のヘッダー: その他のヘッダー値
次に、ブラウザはセッション情報を Set-Cookie し、次に示すように各リクエストに Cookie HTTP ヘッダーを追加して情報をサーバーに送り返します。
GET /index.html HTTP/1.1
Cookie: 名前=値
その他のヘッダー: その他のヘッダー値
サーバーに返送された追加情報を使用して、クライアントがどのリクエストから来たのかを一意に確認できます。
完全な Cookie には次のものが含まれます。