EagleLand

Web App Manifest

Published at 2016-06-23

Web App Manifestは、Webページのメタ情報をJSON形式でフォーマット化したものである。

Web App Manifestのサンプル

次のようなJSONファイルを用意して、<link rel="manifest" href="manigest.json">な感じでHTMLから参照する。<link>で指定するのでルートになくても動きそうだが、ファイルの性質的にルートに置いておきたい気持ちになる。

{
  "name": "Awesome Example App",
  "short_name": "Example App",
  "start_url": "index.html",
  "icons": [ {
    "src": "images/icon-144x144.png",
    "sizes": "144x144",
    "type": "image/png",
    "density": "3.0"
  }],
  "display": "standalone"
}

Webページの振る舞いを直接制御する機能は持ちあわせておらず、ブラウザがロードしたときにWeb App Manifestがあるとそれに基づいて機能を補助するような位置付け。

具体的には、AndroidのChromeでWeb App Manifestが配信されているページを複数回訪問すると、バナーが表示されモバイルデスクトップへのインストールを促される。iOS Safariで実装が進んだ時にどのように機能するか不明だが、Progressive Web Appsの流れが進めば近い振る舞いが予想できる。が、Appleの場合はiOSのマーケットの事情もあると思うのでなんとも…。

Web App Manifestに定義されている属性

icons

インストールバナーなどに使われるアイコンを指定する。少なくとも 144x144のPNG がひとつ指定されている必要がある。某アプリでJPGだけをiconsに指定したところ、インストールバナーが表示されなかった。

{
  "icons": [{
    "src": "images/icon-144x144.png",
    "sizes": "144x144",
    "type": "image/png",
    "density": "3.0"
  }]
}

ネイティブアプリがある場合に、Google PlayやiTunesのURLを指定しておくと促されたりする。webを指定すると、start_urlにもとづいてインストールが行われる。

{
  "related_applications": [{
    "platform": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]
}

Web App Manifestのデバッグ

JSONがWeb App Manifestとして妥当かどうかはWeb Manifest Validatorを使ってチェックできる。ファイルのアップロードでも、テキストのペーストでも、配信されているURLでもOK。

Webページで配信されているWeb App Manifestのデバッグには、DevToolsに搭載されているApplicationタブが便利で、ApplicationセクションのManifest項目に詳細が表示される。ホームスクリーンへの追加もここでエミュレートできる。

参考資料

最後に、Totally Tooling Tipsでの紹介動画とGoogle Developersの記事を。

タイトルと URL をコピーしました