🌱

PWAの設定ファイル、Web app manifestの解説

に公開
Angular
PWA
SPA
webapp
manifest
tech

Web app manifest（ウェブアプリマニフェスト）はPWA設置の時、ユーザーデバイスに必要な情報を提供してくれる設定ファイルです。アプリの名前やアイコン情報、アプリが開いた時のURL設定など、色々な情報が設定できます。ファイル名は自由で拡張子は.webmanifestが求められますが、.jsonの形もサポートされます。生成したファイルはプロゼクトのルートディレクトリに位置させてください。

重要マニフェスト属性

属性 必須 A2HS[1]に必要 説明
name ⭕️ ⭕️ ウェブアプリケーションの名前
short_name ⭕️ ⭕️ nameを表示するのに十分なスペースがない場合、表示される名前
icons ⭕️ ⭕️ アプリケーションアイコンとして機能する画像ファイル。各オブゼクトにはsrc,sizes,typeの情報が必要。choromeの場合、少なくとも192x192px,512x512px二つのサイズが必要。
id - - ウェブアプリケーションの一意な識別子
start_url - ⭕️ ウェブアプリケーションの開始 URL
background_color - ⭕️ スプラッシュ画面で表示される背景色。 CSSのbackground-colorと一致させるべきなので、gradient設定などは不可。
display - ⭕️ ウェブサイトの表示モード。 既定値はbrowser。指定されたモードに対応していなかった場合は、定義済みの代替チェーンに従う。（fullscreen → standalone → minimal-ui → browser）[2]
display_override - - 表示モードの配列。順番に考慮され、最初にサポートされた表示モードが適用される。[3]
scope - - アプリケーションコンテキストのナビゲーションスコープ。scopeが相対URLなら、ベースURLはマニフェストのURLを元にする。最後にスラッシュ（/）付かないと無効になるので注意。
theme_color - - アプリケーションの既定のテーマカラー。head内のmetaタグと統一させた方が良い
shortcuts - - ウェブアプリ内の主要なタスクやページへのショートカット及びリンクの配列。ショートカットのオブゼクトの中にはnameとurlが必須項目。
description - - アプリケーションの目的などを説明。Android Chromeブラウザなら、PWA設置する時のプロムプトにdesctipsionとscreenshotsの情報が表示される。
screenshots - - アプリケーションのショーケースに向けたスクリーンショットの配列。各オブゼクトにはsrc,sizes,typeの情報が含まれる。Android Chromeブラウザなら、PWA設置する時のプロムプトにdesctipsionとscreenshotsの情報が表示される。イメージは特定基準に従う必要がある。[4]

manifestファイルの設定

manifestファイルを生成し、必要な情報を記載しましたら、PWAサイトの全てのページに以下のようにlinkタグを実装してください。SPAなら、index.htmlの<head>タグ内で追加すれば良いです。

<link rel="manifest" href="/manifest.webmanifest">

manifestファイルの確認

Chrome開発者ツールでapplication＞manifestで確認できます。

参考：
https://web.dev/add-manifest/
https://developer.mozilla.org/ja/docs/Web/Manifest

脚注

  1. Add To Home Screen(ホーム画面に追加) ↩︎


  2. （左）browserモード：アドレスバーとUIあり
    （中央）standaloneモード：アドレスバー隠し、UIあり
    （右）fullscreenモード：アドレスバーとUI隠し、コンテンツのみを見せる ↩︎

  3. {
    "display_override": ["window-control-overlay", "minimal-ui"],
    "display": "standalone",
    }
    この場合、standalone→window-control-overlay→minimal-uiの代替チェーンに従う。 ↩︎

  4. 幅と高さは少なくとも320px、最大3840pxまでなること。最大寸法は最小寸法の 2.3 倍を超えないこと。全てのスクリーンショットのアスペクト比は同じであること。 ↩︎

Discussion