前回は，OdometerというWebアプリへの機能追加 を通して，Background Pages，Message Passingの詳細を解説しました。今回は，Odometerにさらに機能を追加する形でOptions Page，Web Storageについて解説していきたいと思います。

追加機能の概要

多くのWebアプリでは，使いやすいようにユーザー自身が各種設定を行うことが可能になっています。Odometerでもユーザービリティ向上のためにいくつかの設定項目を用意したいと思います。

例えばOdometerが目的地までの距離を通知する間隔は，目的地から1km圏内であれば200mごとに通知するように設定されています。これらをユーザーが任意の間隔で通知を受けられるように修正します。また，通知間隔以外にもデスクトップへの通知の有効／無効の切り替えやポップアップを表示している通知時間なども同時に設定できるように修正します。

設定画面の呼び出しには，Web AppsのOptions Pageという仕組みを利用し，設定値を保存する方法としてHTML5（広義の意味でのHTML5）のAPIであるWeb Storageを利用します。

Webアプリの構成

Webアプリを構成するファイルにoptions.htmlとその関連ファイルを追加します。options.htmlは，そのまま設定画面として表示されます。

{
  "name": "Odometer",
  "description": "距離計",
  "version": "0.3",
  "app": {
    "launch": {
      "local_path": "main.html"
    }
  },
  "icons": {
    "16": "icon_16.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
  "options_page": "options.html",
  "background_page": "background.html",
  "permissions": [
    "geolocation",
    "notifications",
    "background"
  ]
}

"options_page"に設定画面となる任意のHTMLファイルとして，今回追加したoptions.htmlを指定しています。