はじめに

ウェブサイトをPWA（Progressive Web Apps）化するためには、マニフェストファイル（manifest.json）の作成と指定が必須です。

マニフェストファイルは、ウェブアプリケーションのメタデータを定義するJSON形式のファイルで、ブラウザがアプリケーションをどのように表示すべきか、どのように動作すべきかなどを定義するための情報となります。

マニフェストファイルの項目

PUSHCODEが提供しているマニフェストファイルの項目について紹介します。

項目	説明
name	アプリのフルネーム。これはブラウザのアプリインストールプロンプトやアプリストアで表示されます。PUSHCODEでは、新規サイト登録時に設定した「ホームアイコン名」が記載されます。
short_name	アプリの短縮名。スマートフォンのホーム画面など、スペースが限られた場所で表示されます。PUSHCODEでは、新規サイト登録時に設定した「ホームアイコン名」が記載されます。
start_url	アプリが起動されるときに最初に表示されるURL。通常はウェブサイトのルートパス（/）が指定されます。PUSHCODEでは、ルートパス（/）が記載されます。
display	アプリの表示モード。以下のいずれかの値を指定できます。PUSHCODEでは、standaloneが記載されます。 fullscreen: ブラウザのUIを表示せず、全画面表示します。 standalone: ブラウザのUIの一部を表示せず、ネイティブアプリのように表示します。
background_color	アプリの背景色。これはスプラッシュスクリーンやブラウザのアドレスバーの色として使用されます。
theme_color	アプリのテーマカラー。これはブラウザのアドレスバーの色やタスクスイッチャーで使用されます。
icons	アプリのアイコンの配列。アイコンは、ホーム画面、スプラッシュスクリーン、アプリストアに表示されます。各アイコンは、以下の属性を指定します。 src：アイコン画像ファイルへのパス。PUSHCODEでは、新規サイト登録時に設定したアイコンパスが記載されます。 sizes：アイコンのサイズ（幅x高さ）。PUSHCODEでは、512×512が記載されます。 type：画像ファイルのタイプ。PUSHCODEでは、image/pngが記載されます。

マニフェストファイルの設置場所

マニフェストファイルはウェブサイトのルートディレクトリに設置するのが一般的で、最も推奨される方法です。ルートディレクトリに設置することで、ブラウザがそのファイルを最も簡単に検出・読み込むことができます。

マニフェストファイルは、通知許諾タグ内の <link> タグを通して参照されます。

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

以上がマニフェストファイルについての基本的な説明となります。

このファイルを適切に設定することでユーザーにネイティブアプリのような体験を提供することが可能となります。