P70～P76 第2章既存のWebアプリをPWA化してみる

誌面で紹介されていた利用ツール

詳細は写真などで紹介されているので割愛

Webアプリをインストール可能にする

インストール可能にする事で次の様な想定が必要

アドレスバーなどを表示しないネイティブアプリのようなUI
アプリの切り替え画面でアプリとして認識(ex. Win + Tab, Alt +Tab)
アプリのドロワーやアプリの管理への追加

実装方法がOS単位で異なる

iOSの場合

HTMLのhead内に記述を行う事で対応可能
(コーディング内容は誌面に記載あるため割愛)
なお、iOSでPWAをインストールできるのはSafariからのみ

Android / デスクトップの場合

殆どのブラウザで同様のインストール基準が設けられているがわずかな違いは有
誌面ではGoogle Chromeでの対応方法について解説
まず、「ウェブアプリマニフェスト」と呼ばれるJSONファイルを読み込む記述をhead内に追記
(コーディング内容は誌面に記載あるため割愛)
マニュフェストファイルのファイル名は任意でOK
インストール要件を満たすために次の5つのプロパティが必要

short_nameまたはname
192×192と512×512ピクセルのアイコンを含むicons
start_url
displayプロパティにfullscreen、standaline、minimal-uiのどれか
prefer_related_applicationsにture以外の値

displayプロパティでstandaloneを設定することで、ブラウザURLバーなどが表示されないネイティブアプリのようなUIで起動可能
Lighthouse6からはMaskable iconという、アイコンが円状にマスクされても表示がおかしくならないように、アイコンの内側にセーフゾーンを残したアイコンの設定が必要になった。
(無くてもインストール事態は可能であるが、Lighthouseのチェックが通過しない)
prefer_related_applicationsは、他に推奨するアプリがあるかを示すプロパティで、デフォルトfalseであり、理由が無ければそのままでOK
他のプロパティは、web.devのAdd a web app manifestやMDNのウェブマニフェストなどを参考

Service Workerの登録

上記の後、head内にService Workerを登録する記述を追記する。
Service Workerとは、ブラウザがWebページとは別にバックグラウンドで実行するスクリプトで、プッシュ通知やキャッシュ操作などの機能もこの機能で実現されており、PWAのコアの技術要素になる。
但し、アプリをインストールするだけで、処理は空でも構わない。
Service WorkerはHTTPSの環境でしか動作しないため(例外的にlocalhostでは稼働するが)、HTTPS環境でのサイト配信が必要になる。

実装結果確認方法

ここまで実装すると、デスクトップの場合はアドレスバーにインストールボタン、AndroidではMini-infobarと呼ばれるインストールを促すバナーが表示される。
iOSの場合はこれらの機能が提供されていないため、ユーザー自身がメニューを表示して、ホーム画面に追加を行う必要がある。

キャッシュのコントロール

Service Workerのスクリプト内に手動で書くこともできるが複雑な記述になる。
誌面では、簡単な記述でService Workerのコードを生成してくれるGoogle製のライブラリ「Workbox」を使用
キャッシュするアセットを、URLとリビジョンと呼ばれる任意の文字列を持ったオブジェクトの配列で指定
アセットの内容を更新する際、リビジョンを指定する事で新しいファイルを取得してれる事が可能
リビジョンの更新は手動ではなく、Workboxのビルドツールを使うことで自動で生成可能
当対応後、Chrome Dev Toolsのnetworkタブで2回アクセスすると、Sizeの部分の2回目の表示が(ServiceWorker)と変更されていれば成功

プリキャッシュとランタイムキャッシュ

上記のキャッシュはプリキャッシュと呼ばれ、Service Workerのインストール時にキャッシュ
リビジョンで管理でき、アプリの主要なリソースや、長期間キャッシュできることが分かっているアセットに利用
ランタイムキャッシュは、指定したURLにリクエストがあったときのみアセットをキャッシュ
ランタイムキャッシュは、リソースに合わせて有効期限やキャッシュ戦略と呼ばれるファイルの取得パターンを設定可能
なおキャッシュ戦略とは、「キャッシュを優先的に使用する」「ネットワークを優先してネットワーク接続が無い時はキャッシュから取得」などである。
キャッシュを活用することでオフラインのキャッシュも可能である。