【特集】

詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編

3 サンプルのソースコード

白石俊平  [2009/08/17]

3/11

サンプルのソースコードを以下に示す。

HTMLファイルでは、HTML要素のmanifest属性にマニフェストファイルのURLを指定している以外は、特に注目すべき点はない。

hello.html

<!DOCTYPE HTML>
<html manifest="hello.manifest">
 <head>
  <meta charset="UTF-8">
  <title>おはよう</title>
  <script src="hello.js"></script>
 </head>
 <body onload="init()">
  <p>おはよう</p>
</body>
</html>

上のHTMLファイルから読み込まれているJavaScriptファイルは以下の通りだ。ドキュメントのonloadイベントで呼び出される、init()というメソッドが1つ定義されているのみだ。

hello.js

function init() {
    setInterval(function() {
        // (1) キャッシュのアップデートを明示的に行う
        applicationCache.update();
    }, 5000);
    // (2) キャッシュの更新イベントを監視する
    applicationCache.addEventListener("updateready", function() {
        if (confirm("アップデートを利用できます。リロードしますか?")) {
        // (3) キャッシュを最新のものに入れ替える
            applicationCache.swapCache();
            // リロード
            location.reload();
        }
    }, true);
}

上のソースコードにおけるポイントを以下に示す。

(1) アプリケーションキャッシュは、「window.applicationCache」というオブジェクトを介してJavaScriptコードから操作することができる。ここで使用しているupdate()メソッドは、「キャッシュマニフェストの更新チェック→更新されていれば、リソースをダウンロードし、イベント通知」という、キャッシュ更新のフローを強制的に実行するためのものだ。

(2) アプリケーションキャッシュからは様々なイベントが通知される。ここで監視している「updateready」というイベントは、キャッシュの更新が完了して新しいバージョンが利用できるようになったことを通知するイベントだ。アプリケーションキャッシュから発生するイベントには以下のようなものがある。

  • checking … マニフェストファイルのダウンロードとチェックを行っている
  • noupdate … マニフェストが変更されていない
  • downloading … マニフェストに記述されたリソースのダウンロード中
  • progress … 更新プロセスが進行中
  • updateready … キャッシュの更新に完了した。swapCache()を呼び出してキャッシュを最新のバージョンと取り替える事が可能。
  • cached … 初回のキャッシュに成功した。
  • obsolete … マニフェストのダウンロードに失敗し、キャッシュを無効化した
  • error … エラーが発生

(3) キャッシュが更新されたら、swapCache()を呼び出すことで最新のキャッシュに切り替えることができる。

3/11

インデックス

目次
(1) 本特集の趣旨
(2) アプリケーションキャッシュ
(3) サンプルのソースコード
(4) キャッシュマニフェストの記述
(5) Webサーバの設定
(6) クロスドキュメントメッセージング
(7) Web Workers
(8) Web Storage
(9) Web Database
(10) Web Sockets
(11) Geolocation API

もっと見る

関連キーワード


IT製品 "比較/検討" 情報

転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

ミス・モノクローム、真夏の店頭抽選会ツアーの開催決定! 旧譜フェアも開催
[22:30 6/26] ホビー
【レポート】マリオと共にソニック25周年を祝う -「ソニック25周年 アニバーサリーパーティー」
[22:29 6/26] ホビー
MF文庫J、6月新刊は8タイトル! 『ハイスクール・フリート』公式スピンオフ
[22:20 6/26] ホビー
[橋本愛]熊本の復興支援に「お手伝いできた」 「うつくしいひと」チャリティー上映で
[21:35 6/26] エンタメ
夏乃あゆみ新作は、祇園祭が題材の和風バディもの「祇園祭に降る黒い花」1巻
[21:19 6/26] ホビー

求人情報