2022年1月28日今から始めるPWA対応（HTML編）

UI開発者橋本

昨年末に公開した「ミツエーテックラジオ」の#25「誰でも分かるPWA」でお話ししたように、当社のPodcast「ミツエーテックラジオ」をPWA化しました。 PWA化したことで、以下の項目が可能となりました。

アプリとしてインストール
オンラインで一度訪問したページはキャッシュを利用しオフライン時は文字起こしの閲覧
オンライン時も2回目以降訪れた際にキャッシュを利用し表示パフォーマンス向上
キャッシュがないページはオフライン時、オフライン用のページを表示

今回から私が取り組んだPWA化の方法について書いていきます。

PWA化に必要な条件のおさらい

まず「PWA」としてインストール可能にするには以下の3つの条件が必要です。

Webサイト自体がHTTPSで配信されていること
Web App Manifestを読み込んでいること
Service Workerが登録されていること

また実際の作業ファイルで表すと、最低でも「キャッシュ対象となるHTMLファイル」、「Web App ManifestのJSONファイル」、「Service WorkerのJSファイル」の3ファイルがあればPWA化自体は可能です。

そのうち今回はHTMLファイルの処理部分に関して説明します。

PWAにしたいコンテンツの用意

基本的にPWA化はサイト全体だけでなく、一部のディレクトリのみに絞ることが可能です。そのため、サイト内の限定的なページやコンテンツだけをPWAとして利用または閲覧してもらうといった使い方ができます。ミツエーテックラジオも、ミツエーサイト全体（https://www.mitsue.co.jp/）のうちのミツエーテックラジオ配下（https://www.mitsue.co.jp/knowledge/tech_radio/）のみにスコープを絞ったものになります。具体的なスコープの決め方についてはまた別の記事でご紹介する予定です。 PWA化するにあたってコンテンツ部分で必須の項目や条件などはないので、ここは自由に作ってもらえれば良いと思います。

リソースを読み込む

次はPWA化のために必要なリソースを読み込む記述を書いていきます。必要なリソースとして大きく分けると以下の3つになります。

Web App Manifest
Service Worker
アプリを表すアイコン（iOS用）

Web App Manifest

まずWeb App Manifestですが、head要素内で以下のように読み込みます。

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

拡張子についてですが、Web Application Manifestの仕様にある通り、MIMEタイプが「application/manifest+json」であれば.jsonでも、.webmanifestでも問題はありません。

Service Worker

続いてService Workerですが、こちらはWeb App Manifestと同じように読み込むのではなく、JSでService Workerを登録する処理を書きます。

<script>
navigator.serviceWorker.register('/sw.js');
</script>

script要素の中で、navigator.serviceWorker.registerでService Workerの処理が書かれたJSファイル（上記の例ではsw.js）を登録します。
sw.jsが配置されているパスより上位のパスは、Service Workerの制御の範囲外のため、PWA化したいコンテンツが置かれたディレクトリの直下に配置する必要があります。

アプリアイコン

最後のアイコンに関しては、iOSでアプリとしてホーム画面に追加すると表示されるアイコンやスプラッシュ画面などで使用する画像になります。 Androidはmanifest.jsonで指定したアイコン画像から反映されるのですが、iOSではまだサポートされておらず、別途HTMLファイルで"apple-touch-icon"と"apple-touch-startup-image"を含めたlink要素で画像を指定する必要があります。
また"apple-touch-startup-image"はさまざまな画面幅に合わせるため、Human Interface Guidelinesを参照し対象とするデバイス分指定する必要があります。

<link rel="apple-touch-icon" type="image/png" sizes="192x192" href="/img/192x192.png">
<link rel="apple-touch-startup-image" href="/img/splashscreens/640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/img/splashscreens/750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/img/splashscreens/1080x1920 .png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/img/splashscreens/1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">

上記のように、デバイスの解像度の画像を用意し、デバイスのサイズをdevice-width、device-heightで指定と高解像度の比率を示す-webkit-device-pixel-ratioを指定し、最後に基本的にデバイスは縦向きなので共通でorientation: portraitを指定します。今回の例ではiOSの以下のデバイスに対応する画像が用意されています。

iPhone SE（640x1136）
iPhone 6, 6s, 7, 8（750x1334）
iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus（1080x1920）
iPhone X, XS, 11 Pro, 12 mini, 13 mini（1125x2436）

HTMLファイルに関しては今回紹介したものを記述しておくことでPWA化の準備が整います。次回はWeb App Manifestについて書く予定です。

2022年1月28日 今から始めるPWA対応（HTML編）