Stax
Tools

PWA Manifest Builder

Generate a complete Web App Manifest for your PWA.

{
  "name": "My PWA App",
  "short_name": "MyApp",
  "description": "A Progressive Web Application",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "lang": "en",
  "categories": [
    "utilities"
  ],
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#000000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="MyApp" />

PWA Manifest Builderの仕組み

PWA manifest builderは、Progressive Web App向けの有効なmanifest.jsonを生成します。アプリ名、アイコン、テーマカラー、表示モード、start URLを入力すると、完全なJSONとともに、ドキュメントのheadに追加するHTMLリンクタグおよびLighthouseに対応したアイコンチェックリストが出力されます。ChromeのPWAインストール基準を満たし、AndroidのAdd to Home Screen プロンプトに表示されるために必要なすべてのフィールドをカバーしています。

Web App Manifest仕様では、name、short_name（ホーム画面で使用）、icons（最低192×192 pxおよび512×512 pxのPNGエントリを含む）、start_url、表示モードが必要です。displayフィールドはstandalone（ブラウザUIを非表示にし、最もアプリらしい見た目）、minimal-ui（戻る/更新ボタンを保持）、fullscreen、browserを受け付けます。最もアプリらしいユーザー体験にはstandaloneが正しい選択であり、ChromeでPWAインストールバッジを表示させるために必要です。

theme_colorフィールドはAndroidのブラウザツールバーの色およびスタンドアロンモードのタイトルバーの色を制御します。アプリのプライマリブランドカラーと一致させてください。background_colorフィールドはPWAが初めて起動される際にService Workerが読み込まれている間に表示されるスプラッシュ画面の背景色を設定します。スタイルが適用されていないコンテンツのちらつきを防ぐため、アプリのローディング画面の背景色と一致させてください。

shortcutsの配列はAndroidホーム画面アイコンの長押しコンテキストメニューに表示されるクイックアクションを定義します。各ショートカットにはname、short_name、url、およびオプションのiconsの配列があります。例えば、SNSアプリでは「新規投稿」や「メッセージ」などのショートカットを設定することで、ホーム画面を開かずに直接機能にアクセスできます。Androidのランチャーでは最大4件のショートカットが表示されます。

manifest.jsonだけではPWAをオフラインで動作させることはできません。オフラインでのキャッシュやレスポンスはアプリのJavaScriptから登録されたService Workerが担います。manifestはブラウザにアプリがインストール可能でPWA対応であることを伝え、Service Workerがオフライン機能を提供します。ビルダーはmanifestを出力し、Service Workerを追加するためのWorkboxドキュメントへのリンクも提供します。

よくある質問

What is a web app manifest?
A Web App Manifest is a JSON file that tells the browser about your Progressive Web App. It enables features like Add to Home Screen, splash screens, full-screen mode, and custom theme colors.
What is the difference between standalone and fullscreen display?
Standalone removes the browser UI (address bar, navigation buttons) so the app looks native. Fullscreen removes the status bar too. Use standalone for most apps; fullscreen for games or immersive experiences.
What icon sizes do I need for a PWA?
Minimum: 192×192 (for Add to Home Screen) and 512×512 (for splash screens). Chrome requires both. Use purpose: maskable for icons that should be cropped by the OS into different shapes.

関連ツール