Web App Manifest
name、icons、start_url、display、theme_colorを含むmanifest.jsonを記述し、ブラウザーにホーム画面への追加を促すメッセージを表示させます。
「Web App Manifest」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
PWAとは
Progressive Web Appは、ネイティブアプリのような機能を持つWebサイトです。ホーム画面にインストールでき、オフラインで動作し、プッシュ通知を受け取れます。中核となる3つの要素は、Web App Manifest、Service Worker、HTTPSです。
Manifestファイル
manifest.json（または.webmanifest）は、アプリのメタデータを記述するJSONファイルです。ブラウザーはこれを読み取り、「ホーム画面に追加」を有効にしたり、ネイティブアプリのようにアプリを起動したりします。
基本的なManifest
最小限のManifestには、name、icons、start_url、display modeを含めます。
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}Manifestのリンク
HTMLの<head>からリンクします。
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">displayモード
"display"はアプリのウィンドウ周りの表示を制御します。"standalone"（ブラウザーUIなしでアプリのように表示）、"fullscreen"（没入型でステータスバーを非表示）、"minimal-ui"（一部のブラウザーコントロールを表示）、"browser"（通常のタブ）があります。
アイコン — 複数のサイズ
複数のサイズのアイコンを用意してください。最新のAndroidでは192と512が必要で、Appleでは追加のサイズも必要です。適応型Androidアイコンには"purpose": "maskable"を使います。
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Apple固有のタグ
iOSはManifestを完全にはサポートしていません。iOSのホーム画面への追加に対応するため、Apple固有のmetaタグを追加します。
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<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="Notes">インストールプロンプト
条件（Manifest + service worker + HTTPS + ユーザーの利用）が満たされると、ブラウザーはbeforeinstallpromptイベントを発火します。イベントを保留して、独自のUIから起動できます。
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}ショートカット（App Shortcuts）
Manifestでは、インストール済みアプリのアイコンを長押ししたときに表示するショートカットを宣言できます。
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]カテゴリとスクリーンショット
categoriesとscreenshotsを追加すると、Chrome AndroidとWindowsでより詳細なインストールUIを表示できます。
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]Manifestのテスト
DevTools → Application → Manifestを開きます。Chromeでは、解析されたManifestのフィールド、アイコンのプレビュー、警告（アイコンの不足、コントラスト不足など）が表示されます。
フレームワークで簡単に設定
Next.jsではmanifest.webmanifestをpublic/に置きます。Nuxtでは@vite-pwa/nuxtモジュールをインストールします。Viteではvite-plugin-pwaがManifestとservice workerを自動的に生成します。
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};クイックチェック
Web App Manifestのdisplayで、インストール済みのPWAをネイティブアプリのようにブラウザーUIなしで開くには、どの値を指定しますか？
まとめ: Web App Manifest
PWAのメタデータを記述するJSONファイルです。name、short_name、start_url、display、theme_color、icons（複数のサイズとmaskable）を含めます。HTMLではrel=manifestを使ってリンクします。iOSではApple固有のmetaタグが必要です。独自のインストールUIにはbeforeinstallpromptイベントを使います。より詳細なインストールUIにはshortcutsとscreenshotsを使います。フレームワーク（Vite PWA、Next、Nuxt PWA）が生成を自動化します。
よくある質問
「Web App Manifest」レッスンは無料ですか？
はい。「Web App Manifest」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「Web App Manifest」で何を学びますか？
name、icons、start_url、display、theme_colorを含むmanifest.jsonを記述し、ブラウザーにホーム画面への追加を促すメッセージを表示させます。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Web App Manifest」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。