ウェブアプリマニフェスト

ウェブアプリマニフェストは、プログレッシブウェブアプリ (PWA) と呼ばれる一連のウェブ技術の一部であり、アプリストアを通さずに端末のホーム画面にインストールすることができるものです。単純なホーム画面リンクやブックマークを持つ通常のウェブアプリとは異なり、 PWA は事前にダウンロードしてオフラインでも動作するだけでなく、通常の Web API を使用することもできます。

ウェブアプリマニフェストは、ウェブアプリケーションについて、ウェブアプリをダウンロードしたり、ユーザーにネイティブアプリと同じように見せる(例えば、端末のホーム画面にインストールされ、ユーザーに素早いアクセスと豊かな操作性を提供するなどの)ために必要な情報を JSON テキストファイルで提供します。 PWA のマニフェストには、その名前、作者、アイコン、バージョン、説明、および (他のものの中で特に) 必要なすべてのリソースのリストが含まれています。

メンバー

ウェブマニフェストには、以下のキーを設定することができます。それぞれのリンクをクリックすると詳細情報を見ることができます。

    マニフェストの例

    json
    {
      "$schema": "https://json.schemastore.org/web-manifest-combined.json",
      "name": "HackerWeb",
      "short_name": "HackerWeb",
      "start_url": ".",
      "display": "standalone",
      "background_color": "#fff",
      "description": "読みやすいハッカーニュースアプリです。",
      "icons": [
        {
          "src": "images/touch/homescreen48.png",
          "sizes": "48x48",
          "type": "image/png"
        },
        {
          "src": "images/touch/homescreen72.png",
          "sizes": "72x72",
          "type": "image/png"
        },
        {
          "src": "images/touch/homescreen96.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": "images/touch/homescreen144.png",
          "sizes": "144x144",
          "type": "image/png"
        },
        {
          "src": "images/touch/homescreen168.png",
          "sizes": "168x168",
          "type": "image/png"
        },
        {
          "src": "images/touch/homescreen192.png",
          "sizes": "192x192",
          "type": "image/png"
        }
      ],
      "related_applications": [
        {
          "platform": "play",
          "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
        }
      ]
    }
    

    マニフェストの展開

    ウェブアプリマニフェストは、文書の <head> 内の <link> 要素を使用して HTML ページから展開されます。

    html
    <link rel="manifest" href="manifest.json" />
    

    .webmanifest の拡張子が仕様書の Media type registration の節で指定されています(マニフェストファイルのレスポンスは Content-Type: application/manifest+json を返してください)。ブラウザーは一般に .json (Content-Type: application/json) のような他の適切な拡張子でもマニフェストに対応します。

    マニフェストへのアクセスに資格情報が必要な場合は、マニフェストファイルが現在のページと同じオリジンにあったとしても、 crossorigin 属性を use-credentials に設定する必要があります。

    html
    <link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
    

    スプラッシュ画面

    一部のブラウザー(例えば Chrome 47 以降)では、ホーム画面からサイトが起動されるとスプラッシュ画面が表示されます。スプラッシュ画面はウェブアプリマニフェストのプロパティから、具体的には以下のように自動生成されます。

    仕様書

    仕様書
    Web App Manifest

    ブラウザーの互換性

    Report problems with this compatibility data on GitHub
    desktopmobile
    Chrome
    Edge
    Firefox
    Opera
    Safari
    Chrome Android
    Firefox for Android
    Opera Android
    Safari on iOS
    Samsung Internet
    WebView Android
    WebView on iOS
    background_color
    description
    display
    display.browser
    display.fullscreen
    display.minimal-ui
    display.standalone
    display_override
    Experimental
    tabbed display mode
    Experimental
    window-controls-overlay display mode
    Experimental
    file_handlers
    Experimental
    icons
    id
    launch_handler
    Experimental
    launch_handler.client_mode
    Experimental
    name
    note_taking
    Experimental
    note_taking.new_note_url
    Experimental
    orientation
    prefer_related_applications
    Experimental
    protocol_handlers
    Experimental
    protocol_handlers.protocol
    Experimental
    protocol_handlers.url
    Experimental
    related_applications
    Experimental
    scope
    serviceworker
    ExperimentalNon-standard
    serviceworker.scope
    ExperimentalNon-standard
    serviceworker.src
    ExperimentalNon-standard
    serviceworker.use_cache
    ExperimentalNon-standard
    share_target
    Experimental
    short_name
    shortcuts
    start_url
    theme_color

    Legend

    Tip: you can click/tap on a cell for more information.

    Full support
    Full support
    Partial support
    Partial support
    No support
    No support
    Experimental. Expect behavior to change in the future.
    Non-standard. Check cross-browser support before using.
    See implementation notes.
    Has more compatibility info.

    関連情報