Web Manifestとは? インストール可能なアプリのためのメタデータ

Web Manifestは、web appをブラウザに説明するJSONファイルです。名前、アイコン、色、そしてインストール時にどのように起動すべきかを記述します。

ユーザーがweb appをホーム画面にインストールするとき、ブラウザはそれを何と呼ぶか、どのアイコンを使うか、どのように表示すべきかを知る必要があります。Web Manifestは、HTMLからリンクされる小さなJSONファイルでそのメタデータを提供します。これはインストール可能なPWAに必須の要素であり、CIが生成・チェックするシンプルなbuild artifactです。

manifestに含まれるもの

インストールされるアプリのためのnameとshort_name。
異なるデバイス向けの複数サイズのicons。
start_urlと表示モード(standalone、fullscreen、browser)。
起動画面のためのtheme_colorとbackground_color。

どのようにリンクされるか

HTML内の <link rel="manifest" href="..."> タグが、ブラウザをそのファイルに向けます。ブラウザは、アプリがインストール可能かどうか、そしてインストールプロンプトと起動画面をどのようにレンダリングするかを判断する際にこれを読み取ります。

表示モードが重要な理由

displayフィールドは、インストールされたアプリがブラウザのchromeを表示するかどうかを制御します。standaloneまたはfullscreenモードが、アドレスバーなしで起動することで、PWAをネイティブのように感じさせます。

アイコンとビルド

manifestは、リストされたパスとサイズに実際に存在しなければならないアイコンファイルを参照します。単一のソース画像からこれらのアイコンを生成することは、必要なすべてのサイズが揃うようにする一般的なbuildステップです。

CI/CDにおけるmanifest

buildはmanifestを生成し、多くの場合キャッシュが効くようにコンテンツハッシュ付きのアイコンパスを注入します。壊れたmanifestは静かにインストール可能性を無効にするため、CIはmanifestが有効なJSONであること、参照された各アイコンが出力されたこと、必須フィールドが存在することを検証すべきです。

重要なポイント

Web Manifestは、アプリのインストール方法と表示方法を記述するJSONメタデータです。
表示モードとアイコンが、インストールされたPWAをネイティブのように感じさせます。
CIはmanifestを検証し、参照されたすべてのアイコンが存在することを確認すべきです。