WebサイトがPWAになるための必須条件まとめ

HTTP通信になっているか（Redirects HTTP traffic to HTTPS）

PWAではHTTPS必須です。HTTP通信がある場合はリダイレクトが必要です。

manifest.jsonで必須項目が設定されているか

PWAになるためにはmanifest.jsonで必須項目を設定しておく必要があります。ただし、下記の項目がなくても「ホーム画面に追加」自体はできます。

スプラッシュスクリーン設定があるか（Configured for a custom splash screen）

PWAのスプラッシュスクリーンの設定必須項目は、manifest.jsonに

• name
• background_color
• icons (512x 512ピクセル以上の画像)

が設定されていることです。

この3つの条件を満たしていれば、「スプラッシュスクリーン設定がある」ということになります。

テーマカラーがあるか（Sets a theme color for the address bar.）

ブラウザのバーのカラーを設定する「テーマカラー」をmanijest.jsonで設定します。特に指定がない場合は、

"background_color": "#FFFFFF"

で真っ白にしておけば良いでしょう。

ビューポートの設定がmetaタグにあるか（Has a <meta name=\"viewport\"> tag with width or initial-scale）

ビューポートの設定がHTMLヘッダにmetaタグとして指定されている必要があります。

正しくビューポートが設定されているか（Content is sized correctly for the viewport）

Webアプリのコンテンツを正しく表示するために、ビューポートが必要です。PWAでは、ビューポートが正しく記述されている必要があります。

JavaScriptが使えない時の対応があるか（Contains some content when JavaScript is not available）

いわゆる「noscript」の設定がされているかです。Service WorkerなどJavaScriptで動作をさせることが多いPWAでは、ユーザーがJavaScriptをオフにしている場合に通知する手段が必要です。

単純に、

<noscript>
  <strong>当サイトではJavaScriptを利用しない場合、使える機能に制限があります。</strong>
</noscript>

とするだけでもOKです。

アップル端末用のアイコン設定があるか（Provides a valid apple-touch-icon）

Android端末などではmanifest.jsonのiconデータを元にPWAアプリのアイコンを決めてくれますが、アップル端末用については独自の「apple-touch-icon」という設定が必要です。

HTMLヘッダにlink要素で追加します。

<link rel="apple-touch-icon" href="/imgs/icons/apple-touch-icon.png">

---

WebサイトがPWAになるための必須条件を見てきました。

どれも設定自体は難しくないので、意外と見落としガチなところが多いので、この機会にきちんと設定ができているかチェックしてみてください。