前に PWA に対応したが、更に高機能な Web アプリである WebAPK にも対応してみた話。
実際には Android の Chrome にしか対応していないため、 Web アプリのメリットの一つであるクロスプラットフォーム化の点においてフリに思うかもしれない。しかし、 WebAPK は PWA とも共存可能な（対応していれば WebAPK、してなければ PWA を使用する）ため導入しておいて損はないと思う。思う…
導入はやはり Google 公式サイトを見ながら行っていく。 PWA にすでに対応している前提で話を進めていく。一から導入したい場合は公式のチュートリアル通りにすすめていけば良い。
マニフェストファイルの変更
マニフェストファイルの名前を manifest.json に変更。
別途 WebAPK 用のスコープを用意しているのであれば、 "scope" に指定する。
アプリのインストールバナー に対応
アプリのインストールバナー を出すために、以下の 4 つを確認。すべてマニフェストにかかれていれば OK 。
short_name（ホーム画面で使用）name（バナーで使用）192x192の png アイコン（アイコンの宣言には MIME タイプ image/png の指定が必要）- 読み込み先の
start_url
他にもサイト全体の要件として、
- Service Worker の登録
- 2 回以上のアクセスがあり、そのアクセスに 5 分以上の間隔がある
があるが、 １ つ目に関しては PWA のときに対応しているので割愛。 ２ つ目に関してもクライアント側の要件なので割愛。
検証
手動で Android 端末から確認してもいいが、持ってないひとや自動化したい人のために用意されている検証ツール Lighthouse を使って検証。
上記サイトでは、 chrome extension か node module で検証する方法が紹介されているが、おすすめは手軽にできる chrome extension をインストールする方法。
chrome web store で Lighthouse をインスール。自分のサイトの Top で Lighthouse のアイコンをクリックしたときに出てくる Generate report を押せばあらゆる項目をテストしてくれる。
テスト結果のうち、 Progressive Web App の項目のスコアが 100 になっていれば成功。
他にも自分の Web サイトに足りない項目を調べてくれるので、 100 になっていない項目を 100 にするといいかもしれない。
