家計簿アプリを作る #71：PWA対応(ホーム画面への追加)

家計簿アプリ作成シリーズの第71回です。家計簿アプリをスマートフォンのホーム画面に追加して、ネイティブアプリのように起動できるようにします。PWA(Progressive Web App)の基本的な対応です。

manifest.jsonの作成

static/manifest.json に、アプリ名・アイコン・テーマカラー・表示モードを定義しました。

{
  "name": "家計簿アプリ",
  "short_name": "家計簿",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1c64f2",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

display: "standalone" を指定することで、ホーム画面から起動した際にブラウザのアドレスバーなどのUIが表示されず、アプリらしい見た目になります。

ハマりポイント:引用符の重複でmanifestが読み込まれない

app.html に <link rel="manifest"> を追加した際、引用符の書き方を誤ってしまいました。

<!-- ❌ 引用符が二重になって壊れている -->
<link rel=""manifest" href=""/manifest.json" />

<!-- ✅ 正しい形 -->
<link rel="manifest" href="/manifest.json" />

rel=""manifest" のように余計な " が入り込むと、ブラウザはこの属性を正しく解釈できず、manifestが読み込まれません。単純な入力ミスでしたが、見た目上気づきにくいタイプの間違いでした。

iOS Safari向けの個別対応が必要

manifest.json はAndroid Chromeなど多くのブラウザで機能しますが、iOS Safariでは対応が限定的で、いくつかの見た目の要素はApple独自のメタタグで別途指定する必要がありました。

<!-- ホーム画面追加時のアイコン -->
<link rel="apple-touch-icon" href="/icon-192.png" />

<!-- ホーム画面から起動時にブラウザUIを消す -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- ステータスバーの見た目 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<!-- ホーム画面に表示されるアプリ名 -->
<meta name="apple-mobile-web-app-title" content="家計簿" />

apple-mobile-web-app-capable を指定しないと、iOSではホーム画面から開いてもSafariのUIが表示されたままになってしまいます。

デスクトップChromeでの動作確認

localhost はセキュアなコンテキストとして扱われるため、開発環境のままでもインストール確認ができました。Chrome DevToolsの「Application」タブ→「Manifest」パネルで、manifestが正しくパースされているか、エラーが無いかを確認できます。

screenshots フィールドが無いという警告が出ましたが、これはより見栄えの良いインストールUIのための任意項目で、インストール自体はできるため無視して問題ありませんでした。

アドレスバーのインストールアイコンからインストールすると、独立したウィンドウ(ブラウザのUI無し)でアプリが起動することを確認できました。

実機での確認はデプロイ後のHTTPS環境で

iOS Safariは開発中のhttp://localhostやローカルネットワークのURLに対してPWA機能を正しく扱わないことが多いため、実機での最終確認はCloudflare Pagesへのデプロイ後、本番のHTTPS URLで行いました。「共有」ボタン→「ホーム画面に追加」で、アプリらしく起動することを確認できました。

まとめ