バージョン1.1が公開された1990年代からずっと更新されていなかったHTTPですが、
とうとう重い腰を上げて、より高速な通信を実現すべくHTTP2にアップデートされるようですね。
特徴としてはこんな感じのようです。
1．既存のHTTPとAPIは変わらず
2．ヘッダ情報の圧縮・差分送信およびバイナリフレーム化
3．同時に複数のリクエストを投げられる
4．同一ホストへのリクエストは1コネクションで処理する
5．Webサーバー側からキャッシュすべきデータを送ることができる(サーバープッシュ)
6．リクエストの中断をWebサーバーへ通知できる
サーバープッシュなどは、非常に魅力的な機能ですね。
HTMLファイルをレスポンスしたと同時に、
必要なリソースをWebサーバー側から送ることができます。
ただし、WebSocketのように双方向通信を実現するものではなさそうですね。
蛇足ですが、現在策定中の仕様では「HTTP/2」か「HTTP2」が正式名称となるようです。
2.0じゃないんですね。
さて、今回のHTML5のお勉強はWeb高速化に密接に関わるキャッシュ機能、
「ApplicationCache」についてです。
Webページを表示するとき、一般的にブラウザはCSSや画像などをキャッシュしています。
しかしその仕様はブラウザごとに異なっており、
意図的にキャッシュさせたりさせなかったりということを実現することができませんでした。
そこで登場したのがこの「ApplicationCache」です。
ApplicationCacheを利用することで、オフライン状態でもページを表示したり、
キャッシュ内容が古い場合に確実に更新したりすることができるようになります。
実際に試すことができるデモページがありました。
http://html5demos.com/offlineapp
ApplicationCacheを利用していないサイトでは、
インターネット通信ができない状態でページを更新すると何も表示されなくなると思います。
しかしこのサイトは一度表示してしまえば、
たとえ通信ができなくとも何事もなかったかのように表示されます。
それでは、ApplicationCacheの使い方、キャッシュの更新の仕方、
削除の仕方を簡単に解説したいと思います。
■ApplicationCacheの使い方
ApplicationCacheを使うにはまず、マニフェストファイルを用意します。
次のような形式で書きます。
CACHE MANIFEST
# ↑必ずファイルの先頭に記述する
# シャープで始まる行はコメント
# CACHE:の下に書かれたファイルはキャッシュされる
CACHE:
index.html
index.css
images/img1.png
images/img2.png
images/img3.png
# FALLBACK:の下に書かれたファイルは、オフラインの時に代わりに表示される
# 右に指定されたファイルが自動でキャッシュされ、オフライン時に利用される
FALLBACK:
/online.html /offline.html
# NETWORK:の下に書かれたファイルはキャッシュされず、
# 必ず通信して取得される
NETWORK:
*
※中に記述するファイル名に空白等がある場合はURLエンコードする必要があるようです。
適当なファイル(ここではmanifest.appcacheとします)に保存したら、
HTMLファイルに次のように記述します。
<html manifest="manifest.appcache"> ... </html>
こうすることで、ページを表示したときにマニフェストファイルを読み込ませることができます。
なお、マニフェストファイルは
必ず「text/cache-manifest」というMIMEタイプで送らなければいけません。
Apacheであれば、httpd.confファイルや.htaccessファイルに
AddType text/cache-manifest .appcache
と追記する必要があります。
これでApplicationCacheを使用する準備は整いました。
実際に試してみれば、きっちりとキャッシュされていることが
開発者ツールなどで確認できると思います。
■ApplicationCacheの更新方法
キャッシュされたファイルは次のいずれかの方法で更新することができます。
1．マニフェストファイルを修正する
2．JavaScriptから更新する
マニフェストファイルの中身を修正することで、自動的にキャッシュが更新されます。
コメント内容の修正でもキャッシュが更新されるため、
日付等をコメントとして書いておくと良いかもしれません。
ただし、マニフェストファイルの修正後は2度ページを更新するまで修正内容が反映されません。
これは、1度目のページ更新でキャッシュファイルを更新し、
2度目のページ更新で修正内容を反映するためです。
なお、キャッシュ対象のファイルを更新しても、
マニフェストファイルを修正しない限りページは一切更新されないので注意が必要です。
■JavaScriptからApplicationCacheを操作する
ApplicationCacheはJavaScriptから操作することができます。
具体的にどんなことができるかというと、次の通りです。
1．ApplicationCacheの状態確認
2．ApplicationCacheの手動更新
それぞれ簡単に説明します。
●1．ApplicationCacheの状態確認
次のようにすることでApplicationCacheが現在どのような状態かを確認できます。
switch(applicationCache.status) {
case UNCACHED:
// ApplicationCacheを使用していない
break;
case IDLE:
// 何も処理をしていない
break;
case CHECKING:
// 更新確認中
break;
case DOWNLOADING:
// 更新ファイルのダウンロード中
break;
case UPDATEREADY:
// 更新待機中
break;
case OBSOLETE:
// マニフェストファイルにアクセスできないためキャッシュを削除した
break;
}
●2．ApplicationCacheの手動更新
次のように記述することで、更新が必要なときに手動でキャッシュを更新することができます。
あくまでキャッシュが更新されるのみで、
ページ内容はリロードするまで更新されないことに注意してください。
// キャッシュが更新可能になったら呼ばれる関数
applicationCache.onupdateready = function() {
// キャッシュを更新する
applicationCache.swapCache();
// 必要に応じてページを更新する
// location.reload();
}
// キャッシュの更新確認
applicationCache.update();
画像などであれば、キャッシュ更新後に個別にリロード処理を実行することで、
ページをリロードしなくとも動的に更新することもできます。
工夫すれば、JavaScriptやCSSファイルもリロードできるかもしれません。
applicationCache.onupdateready = function() {
applicationCache.swapCache();
// 画像をリロード
var img = document.getElementById("image");
img.src = img.src + "?preventCache=" + Math.random();
}
applicationCache.update();
■ApplicationCacheを削除する
次のいずれかでキャッシュされたファイルを削除することができます。
1．ブラウザのキャッシュを削除する
2．マニフェストファイルを削除・リネームする
ApplicationCacheを利用することで、
オフラインでもWebページが表示可能になるほか、Webサーバーの負荷軽減にも役立ちます。
しかし、キャッシュポイズニング攻撃を受けた場合などは非常に危険な状態となります。
そういったことも考慮してうまく活用できれば、より速いWebページが実現できそうですね。
次回はHTML5から少しはなれて、HTTP2のサーバプッシュとApplicationCacheに関わる「ServiceWorker」について解説する予定です。
monipet
動物病院の犬猫の見守りをサポート
病院を離れる夜間でも安心
ASSE/CORPA
センサー、IoT、ビッグデータを活用して新たな価値を創造
「できたらいいな」を「できる」に
OSGi対応 ECHONET Lite ミドルウェア
短納期HEMS開発をサポート！
GuruPlug
カードサイズ スマートサーバ
株式会社ジェイエスピー
横浜に拠点を置くソフトウェア開発・システム開発・
製品開発(monipet)、それに農業も手がけるIT企業
とうとう重い腰を上げて、より高速な通信を実現すべくHTTP2にアップデートされるようですね。
特徴としてはこんな感じのようです。
1．既存のHTTPとAPIは変わらず
2．ヘッダ情報の圧縮・差分送信およびバイナリフレーム化
3．同時に複数のリクエストを投げられる
4．同一ホストへのリクエストは1コネクションで処理する
5．Webサーバー側からキャッシュすべきデータを送ることができる(サーバープッシュ)
6．リクエストの中断をWebサーバーへ通知できる
サーバープッシュなどは、非常に魅力的な機能ですね。
HTMLファイルをレスポンスしたと同時に、
必要なリソースをWebサーバー側から送ることができます。
ただし、WebSocketのように双方向通信を実現するものではなさそうですね。
蛇足ですが、現在策定中の仕様では「HTTP/2」か「HTTP2」が正式名称となるようです。
2.0じゃないんですね。
さて、今回のHTML5のお勉強はWeb高速化に密接に関わるキャッシュ機能、
「ApplicationCache」についてです。
Webページを表示するとき、一般的にブラウザはCSSや画像などをキャッシュしています。
しかしその仕様はブラウザごとに異なっており、
意図的にキャッシュさせたりさせなかったりということを実現することができませんでした。
そこで登場したのがこの「ApplicationCache」です。
ApplicationCacheを利用することで、オフライン状態でもページを表示したり、
キャッシュ内容が古い場合に確実に更新したりすることができるようになります。
実際に試すことができるデモページがありました。
http://html5demos.com/offlineapp
ApplicationCacheを利用していないサイトでは、
インターネット通信ができない状態でページを更新すると何も表示されなくなると思います。
しかしこのサイトは一度表示してしまえば、
たとえ通信ができなくとも何事もなかったかのように表示されます。
それでは、ApplicationCacheの使い方、キャッシュの更新の仕方、
削除の仕方を簡単に解説したいと思います。
■ApplicationCacheの使い方
ApplicationCacheを使うにはまず、マニフェストファイルを用意します。
次のような形式で書きます。
CACHE MANIFEST
# ↑必ずファイルの先頭に記述する
# シャープで始まる行はコメント
# CACHE:の下に書かれたファイルはキャッシュされる
CACHE:
index.html
index.css
images/img1.png
images/img2.png
images/img3.png
# FALLBACK:の下に書かれたファイルは、オフラインの時に代わりに表示される
# 右に指定されたファイルが自動でキャッシュされ、オフライン時に利用される
FALLBACK:
/online.html /offline.html
# NETWORK:の下に書かれたファイルはキャッシュされず、
# 必ず通信して取得される
NETWORK:
*
※中に記述するファイル名に空白等がある場合はURLエンコードする必要があるようです。
適当なファイル(ここではmanifest.appcacheとします)に保存したら、
HTMLファイルに次のように記述します。
<html manifest="manifest.appcache"> ... </html>
こうすることで、ページを表示したときにマニフェストファイルを読み込ませることができます。
なお、マニフェストファイルは
必ず「text/cache-manifest」というMIMEタイプで送らなければいけません。
Apacheであれば、httpd.confファイルや.htaccessファイルに
AddType text/cache-manifest .appcache
と追記する必要があります。
これでApplicationCacheを使用する準備は整いました。
実際に試してみれば、きっちりとキャッシュされていることが
開発者ツールなどで確認できると思います。
■ApplicationCacheの更新方法
キャッシュされたファイルは次のいずれかの方法で更新することができます。
1．マニフェストファイルを修正する
2．JavaScriptから更新する
マニフェストファイルの中身を修正することで、自動的にキャッシュが更新されます。
コメント内容の修正でもキャッシュが更新されるため、
日付等をコメントとして書いておくと良いかもしれません。
ただし、マニフェストファイルの修正後は2度ページを更新するまで修正内容が反映されません。
これは、1度目のページ更新でキャッシュファイルを更新し、
2度目のページ更新で修正内容を反映するためです。
なお、キャッシュ対象のファイルを更新しても、
マニフェストファイルを修正しない限りページは一切更新されないので注意が必要です。
■JavaScriptからApplicationCacheを操作する
ApplicationCacheはJavaScriptから操作することができます。
具体的にどんなことができるかというと、次の通りです。
1．ApplicationCacheの状態確認
2．ApplicationCacheの手動更新
それぞれ簡単に説明します。
●1．ApplicationCacheの状態確認
次のようにすることでApplicationCacheが現在どのような状態かを確認できます。
switch(applicationCache.status) {
case UNCACHED:
// ApplicationCacheを使用していない
break;
case IDLE:
// 何も処理をしていない
break;
case CHECKING:
// 更新確認中
break;
case DOWNLOADING:
// 更新ファイルのダウンロード中
break;
case UPDATEREADY:
// 更新待機中
break;
case OBSOLETE:
// マニフェストファイルにアクセスできないためキャッシュを削除した
break;
}
●2．ApplicationCacheの手動更新
次のように記述することで、更新が必要なときに手動でキャッシュを更新することができます。
あくまでキャッシュが更新されるのみで、
ページ内容はリロードするまで更新されないことに注意してください。
// キャッシュが更新可能になったら呼ばれる関数
applicationCache.onupdateready = function() {
// キャッシュを更新する
applicationCache.swapCache();
// 必要に応じてページを更新する
// location.reload();
}
// キャッシュの更新確認
applicationCache.update();
画像などであれば、キャッシュ更新後に個別にリロード処理を実行することで、
ページをリロードしなくとも動的に更新することもできます。
工夫すれば、JavaScriptやCSSファイルもリロードできるかもしれません。
applicationCache.onupdateready = function() {
applicationCache.swapCache();
// 画像をリロード
var img = document.getElementById("image");
img.src = img.src + "?preventCache=" + Math.random();
}
applicationCache.update();
■ApplicationCacheを削除する
次のいずれかでキャッシュされたファイルを削除することができます。
1．ブラウザのキャッシュを削除する
2．マニフェストファイルを削除・リネームする
ApplicationCacheを利用することで、
オフラインでもWebページが表示可能になるほか、Webサーバーの負荷軽減にも役立ちます。
しかし、キャッシュポイズニング攻撃を受けた場合などは非常に危険な状態となります。
そういったことも考慮してうまく活用できれば、より速いWebページが実現できそうですね。
次回はHTML5から少しはなれて、HTTP2のサーバプッシュとApplicationCacheに関わる「ServiceWorker」について解説する予定です。
monipet
動物病院の犬猫の見守りをサポート
病院を離れる夜間でも安心
ASSE/CORPA
センサー、IoT、ビッグデータを活用して新たな価値を創造
「できたらいいな」を「できる」に
OSGi対応 ECHONET Lite ミドルウェア
短納期HEMS開発をサポート！
GuruPlug
カードサイズ スマートサーバ
株式会社ジェイエスピー
横浜に拠点を置くソフトウェア開発・システム開発・
製品開発(monipet)、それに農業も手がけるIT企業