あらゆるWebサイトを、インストールできてオフラインでも動くようにします。マニフェスト生成ツール、実際に検証したサービスワーカー、インストールボタン、iPhoneでの制限、ViteやNext.jsでの設定方法を紹介します。
WebサイトをプログレッシブWebアプリにするには、HTTPSで配信し、name、start_url、表示モード、192ピクセルと512ピクセルのアイコンを含むmanifest.webマニフェストを追加して、すべてのページからリンクします。さらに、ファイルをキャッシュしてオフラインで使えるようにするサービスワーカーを登録します。これで、Chromium系ブラウザーではインストールが提案され、Safariの利用者は共有メニューから追加できるようになります。
PWAを構成する3つの要素
フォームに入力すると、マニフェストと、貼り付けるためのheadタグが生成されます。その後、サービスワーカーとインストール用スクリプトをコピーしてください。このページのサービスワーカーは、公開前に実際のブラウザーでネットワークを切断した状態で動作を確認しています。
現在のChromeでは不要です。有効なマニフェスト、HTTPS、ある程度のユーザー操作があれば、インストールの選択肢が表示されます。それでもサービスワーカーは用意すべきです。ないと、インストールしたアプリがオフライン時にブラウザーのエラーページを表示してしまうからです。
はい、ただし制限があります。Safariの利用者は共有メニューからインストールし、インストールを促すイベントはありません。プッシュ通知は、iOS 16.4以降でホーム画面に追加したサイトでのみ動作します。オフラインのキャッシュは動作します。
beforeinstallpromptが発火するのはChromium系ブラウザーだけで、インストールの条件を満たしている場合に限られ、アプリがすでにインストール済みの場合は発火しません。理由はDevToolsのApplicationパネルにあるManifestセクションで確認してください。
Lighthouse 12でPWAカテゴリーは廃止されました。Chrome DevToolsのApplicationパネルを使いましょう。Manifestビューにはインストール可否に関するエラーやアイコンの問題が表示され、Service workersビューでは登録、更新の状態とOfflineの切り替えスイッチが確認できます。
sw.jsのキャッシュのVERSIONを変更します。ブラウザーは変更されたサービスワーカーを検出してインストールし、activateの処理で古いキャッシュを削除します。skipWaitingとclients.claimを使えば、次の読み込みで新しいサービスワーカーに切り替わります。
インストールすると、サイトに専用のアイコンと、アドレスバーのないウィンドウが与えられます。サービスワーカーはオフラインのページを追加します。プッシュ通知には両方が必要で、Appleは利用者がホーム画面に追加したサイトにしか許可していません。
プラットフォーム別のPWAでできること
サイトをオフライン対応にするには3つのファイルが必要です。サービスワーカー、フォールバック用のページ、それを登録する数行のコードです。私たちはこれらのファイルをそのままlocalhostのChromiumで実行しました。サービスワーカーがインストールされ、キャッシュが満たされ、サーバーを停止した状態でもホームページはキャッシュから読み込まれ、一度も訪れていないページではoffline.htmlが表示されました。
ページはまずネットワークを試して最新の内容を表示し、だめならキャッシュしたコピー、それもなければoffline.htmlを表示します。CSS、スクリプト、アイコンなどのファイルはまずキャッシュから取得します。VERSIONを変更すると、次のactivateの処理で古いキャッシュが削除されます。
このページは単体で完結させましょう。表示される時点では他に何も取得できない可能性があるため、スタイルはインラインで書き、外部ファイルは使いません。
beforeinstallpromptイベントが発火するのはChromium系ブラウザー（Chrome、Edge、Samsung Internet、Opera）だけです。SafariとFirefoxはこのイベントを送らないため、そこではボタンは非表示のままで、利用者はブラウザー自身のメニューを使います。
Chromeは、インストールを提案する前にサービスワーカーを必須とはしなくなりました。確認されるのはマニフェストと以下の項目です。Lighthouse 12ではPWAカテゴリーが削除されたため、代わりにChrome DevToolsでインストール可否を確認しましょう。Applicationパネルを開いてManifestを選ぶと、Installabilityの下に問題が一覧表示されます。
Chromeのインストール要件
npm i -D vite-plugin-pwaでインストールします。このプラグインはビルド時にマニフェストを書き出し、Workboxのサービスワーカーを生成するため、sw.jsを手書きする必要はありません。アイコンはpublic/に置きます。
Next.jsはこのファイルを/manifest.webマニフェストとして配信し、linkタグも自動で追加します。オフライン対応には、上のsw.jsをpublic/に置き、小さなクライアントコンポーネントから登録します。
これをapp/layout.tsxで1回だけ描画します。キャッシュされたビルドで編集内容が見えなくならないよう、開発環境では登録をスキップします。
アプリ名
短い名前（アイコンの下に表示）
開始URL
アイコンのフォルダー
テーマカラー
背景色
コピー
マニフェスト生成ツール
表示モード
maskableアイコンを含める
アイコンはicon-192.pngとicon-512.png（およびicon-512-maskable.png）としてアイコンのフォルダーに保存してください。
すべてのページのheadに入れるタグ
無料で始める · クレジットカード不要