はじめに
「自分で作った Web アプリを、スマホのホーム画面からアプリっぽく開けたらいいのに...」と思ったことはありませんか？
実は PWA（Progressive Web App） という仕組みを使えば、Safari や Chrome で「ホーム画面に追加」するだけで、以下のことが実現できます。
- 自分で設定したアプリアイコンがホーム画面に表示される
- アプリ名もそのまま表示される
- 起動時にアドレスバーが表示されないため、ネイティブアプリのような見た目になる
この記事では、実際に Next.js で作ったポケモン図鑑アプリを PWA 化した手順を、わかりやすく解説します。
PWA とは？
PWA（Progressive Web App）は、Web アプリをネイティブアプリのように使えるようにする技術の総称です。
PWA のメリット
| メリット | 説明 |
|---|---|
| ホーム画面に追加できる | アプリアイコン・アプリ名を自分で設定できる |
| アドレスバーが消える | display: "standalone" にすることでブラウザの UI が非表示になり、フルスクリーンのアプリのように見える |
| インストール不要 | App Store や Google Play を経由せず、ブラウザから直接追加できる |
| URL を共有できる | 通常の Web ページと同じく URL でシェアできる |
特にアドレスバーが出ないという点は大きなメリットです！
通常のブラウザで Web アプリを開くと、画面上部にアドレスバーが表示されて画面が狭くなりますが、PWA として起動するとこれが消え、画面全体をアプリの表示に使えます！
今回のディレクトリ構成
PWA 化に関係するファイルだけを抜粋しています。
my-pokemon-app/
├── app/
│ └── layout.tsx # メタ情報を追加する
├── public/
│ ├── manifest.json # 新規作成：PWA の設定ファイル
│ └── img/
│ └── thumbnail/
│ └── pikatyuu.jpeg # アイコンに使用する画像
実装手順
PWA の最小構成はとてもシンプルで、必要なのはたった 2 ステップです。
ステップ 1: manifest.json を作成する
public/manifest.json を作成します。これが PWA の設定ファイルです。
{
"name": "ポケモン図鑑",
"short_name": "ポケモン図鑑",
"description": "PokeAPIを使ったポケモン図鑑アプリ",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ef4444",
"icons": [
{
"src": "/img/thumbnail/pikatyuu.jpeg",
"type": "image/jpeg",
}
]
}
各プロパティの説明
| プロパティ | 説明 |
|---|---|
name | アプリのフルネーム。インストール画面などに表示される |
short_name | ホーム画面のアイコン下に表示される短い名前 |
description | アプリの説明文 |
start_url | アプリ起動時に開かれる URL |
display | "standalone" を指定するとアドレスバーが非表示になる。これが PWA の肝！ |
background_color | アプリ起動時のスプラッシュスクリーンの背景色 |
theme_color | ステータスバーやタスクバーの色 |
icons | ホーム画面に表示されるアイコン画像 |
ポイント:
display: "standalone"がアドレスバーを消す設定です。これを"browser"にするとアドレスバーが表示されたままになります。
ステップ 2: layout.tsx にメタ情報を追加する
Next.js の App Router では、metadata オブジェクトに PWA の設定を追加します。
// app/layout.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "ポケモン図鑑",
description: "PokeAPIを使ったポケモン図鑑アプリ",
manifest: "/manifest.json",
appleWebApp: {
capable: true,
statusBarStyle: "default",
title: "ポケモン図鑑",
},
};
また、<html> タグ内の <head> に以下を追加します。
<html lang="ja" suppressHydrationWarning>
<head>
<link rel="apple-touch-icon" href="/img/thumbnail/pikatyuu.jpeg" />
<meta name="theme-color" content="#ef4444" />
</head>
<body>
{/* ... */}
</body>
</html>
各設定の役割
| 設定 | 説明 |
|---|---|
manifest | manifest.json のパスを指定。これでブラウザが PWA として認識する |
appleWebApp.capable | Safari（iOS）でホーム画面追加時に PWA として動作させる |
appleWebApp.statusBarStyle | iOS でのステータスバーのスタイル |
appleWebApp.title | iOS のホーム画面に表示されるタイトル |
apple-touch-icon | iOS でホーム画面に追加した時のアイコン画像 |
theme-color | ブラウザのテーマカラー（アドレスバーの色など） |
補足 : 今回使用するアプリのサムネはピカチュウです！(ｶﾜｲｲ😍)
実際に試してみよう！
iPhone（Safari）の場合
- Safari でアプリの URL を開く
- 下部の共有ボタン（四角に上矢印のアイコン）をタップ
- ホーム画面に追加をタップ
- アプリ名を確認して追加をタップ
ホーム画面に、manifest.json で設定したアイコンと名前でアプリが追加されます！
※androidも同様に設定してください。
アドレスバーが消える仕組み
PWA の大きなメリットの一つが、アドレスバーが表示されないことです。
これは manifest.json の display プロパティを "standalone" に設定することで実現されます。ブラウザの UI が非表示になり、まるでネイティブアプリのような体験をユーザーに提供できます。
display の選択肢
| 値 | 説明 |
|---|---|
"standalone" | アドレスバーなし。アプリのような見た目（おすすめ） |
"fullscreen" | ステータスバーも含めて完全にフルスクリーン |
"minimal-ui" | 最小限のブラウザ UI（戻るボタンなど）を表示 |
"browser" | 通常のブラウザと同じ見た目 |
アイコン画像のベストプラクティス
今回は既存の JPEG 画像をそのまま使いましたが、本格的に運用する場合は以下のサイズで PNG 画像を用意するのがおすすめです。
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
- 192x192: ホーム画面のアイコン
- 512x512: スプラッシュスクリーン（アプリ起動時の画面）
まとめ
PWA 化に必要な作業は、たったこれだけです。
public/manifest.jsonを作成するapp/layout.tsxにメタ情報を追加する
個人開発したアプリを気軽に使いたい時に、いちいちブラウザで検索するのは面倒なので、ホーム画面に追加してみましょう！！
最後に
今回、例で使用したポケモン図鑑アプリですが、以下にリンクを添付しておくのでホーム画面に追加してみてください！
参考リンク
おすすめ記事
コメント
コメントを読み込み中...