PWAの作り方｜manifest.json・Service Worker・ホーム画面対応を丁寧に解説

最終更新：2026/01/29

「サイトをPWA化したい」「ホーム画面に追加した時にアプリっぽくしたい」  
そんな人向けに、PWA を実装するための基本的な手順をまとめます。

難しそうに見えますが、実際に必要なものはたった2つだけです。

• manifest.json（アプリ情報）
• Service Worker（キャッシュ制御）

これらを正しく置いて、HTML にリンクすれば PWA として動作します。

1. manifest.json を用意する

まず、アプリの情報をまとめた manifest.json ファイルを作ります。

{
  "name": "サイト名",
  "short_name": "短い名前",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

最も重要なのは icons。  
ホーム追加時のアイコンはここが参照されます。

manifest.json を作ったら、HTML に読み込みタグを追加します。

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

2. Service Worker を登録する

次は Service Worker（SW）。  
PWA が“アプリっぽく”動くための裏方担当です。

まず sw.js を作る（最小構成でOK）。

self.addEventListener("install", () => {
  console.log("Service Worker installed");
});

次に HTML または JS から登録します。

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

Service Worker が読み込まれると、  
display: standalone の挙動が発動し、  
アプリのような見た目になります。

3. アイコンを用意する

一般的に必要なのはこの2つです。

• 192×192
• 512×512

iPhone は任意サイズでも補完してくれますが、  
Android はこの2つを重視します。

4. HTTPS が必須

PWA はセキュリティの都合上、  
必ず HTTPS で動作する 仕様になっています。

ローカル開発は例外ですが、公開時は必須です。

5. ホーム画面に追加して動作確認

Safari（iPhone）または Chrome（Android）で  
サイトを開いて「ホーム画面に追加」します。

成功していれば、次のようになります。

• ブラウザUIが消え、アプリ風の表示になる
• アイコンが manifest の画像になる
• URLバーが出ない

PWAは“見た目”と“内部挙動”のセットで成り立つ

PWA は単なるホーム追加ではなく、  
manifest.jsonによる見た目の指定 と  
Service Workerによる機能面の強化  
の2つが揃って初めて成立します。

この2つを正しく設定するだけで、  
誰でもスマホ対応の“アプリ的Webサイト”を作れます。

まとめ

• manifest.json で名前・色・アイコンなどを定義
• Service Worker でアプリ的な動作を実現
• HTTPS が必須
• ホーム画面に追加するとアプリUIへ切り替わる

Webサイトを強化したい人、アプリを出すほどではない人にとって、  
PWA はかなり強力な選択肢になります。