いつの間にか進んでいるプログレッシブウェブアプリのビッグウェーブに乗ろう！
Service Worker、オフラインキャッシュ、スプラッシュスクリーン、WEBプッシュ、最近こんなワードをよく耳にしますね。
これらはプログレッシブウェブアプリと呼ばれるもので使われる要素の事です。
PWA(プログレッシブウェブアプリ)とは
詳細はGoogleの公式ガイドを見るとよいのですが、ざっくり言うとwebサイトをネイティブアプリ風に見せているものという感じです。
この状態がPWAです！みたいな厳密なものではなく、こういう要素を満たすとPWAと呼べますよ、という判断基準として存在するのがPWAです。
PageSpeed Insights
話は変わりますが、GoogleのPageSpeed Insightsはご存知でしょうか。
これは、自分のサイトがモバイル・PCサイトとしてどれくらい最適化されているかを計測するものです。
例えば↑こんな感じで、自分のサイトに点数を付けてくれます。私が開発しているtree-mapsというサイトはブログではなくガチガチのSPAサイトで、PageSpeed Insightsの点数に気を使っているので、比較的点数は高いです。
このように、PageSpeed Insightsが採点してくれますが、Lighthouseも、自分のサイトのPWA実装度合いを採点してくれます。
Lighthouse
インストール
LighthouseはPageSpeed Insightsのようにwebサイトから計測するのではなく、chromeのアドオンとして提供されています。
インストール自体は上記から簡単に行う事ができます。
計測する
これも簡単で、アドオンボタンをクリックし、「Generate Report」ボタンをクリックすると計測が開始されます。
実際に計測すると、以下のようにブラウザが自動的に動き出し、計測されます。計測には1分程度かかります。
※ クリックで再生
計測が正常終了すると、以下のようなレポートが生成されます。
このレポートの点数ですが、基準は刻々と変わっているようで、ある日確認すると、実装を変えていないのに点数が上がったり下がったりしているようです。
developer toolsを開いた状態では計測できない
Chromeのdeveloper toolsを開いたまま計測しようとすると、以下のように「You probably have DevTools open. Close DevTools to use Lighthouse」と怒られるので、素直にdeveloper toolsを閉じましょう。
ローカルでも計測可能（一部計測できない）
http://localhost:8080/ でも計測可能です。しかし、PWAの要素として「httpsである」という基準があるので、httpで計測してPerformanceは0点となってしまいます。
PWAを（軽く）満たしたアプリの挙動を見よう！
私が管理している↓tree-mapsという地図系のWEBサービスのサイトですが、少しだけPWAを満たしています。
www.tree-maps.com
点数的には以下のようになっています。
では、androidのスマホでchromeを開いて「https://www.tree-maps.com」を開き、ホーム画面に追加します。そこからアプリのようにtree-mspを起動した時の動きを見てみましょう。
※クリックで再生
アイコンをクリックするとスプラッシュスクリーンが表示され、ブラウザ特有のURLが表示されるアドレスバーが無く、電池・電波が表示される領域も黒では無く青色になっています。オフラインキャッシュを正しく設定すると、ネット未接続でもキャッシュ済みのjavascript・画像等を使ってアプリを動かす事ができます。
PWA化を進める
PWAの実装
ようこそ | Web | Google Developers
Googleの公式ページを見ながら実装するのが最も確実です。下手にqiitaやブログ等の情報を見るより、公式サイトを見ておいた方がよいです。ちゃんと日本語化されてるので、英語が苦手な方でも心配無用です。（但し高度な専門用語が出て来るので、引っかかる部分はあるとは思います）
私も公式サイトを見ながらServiceWorkerを登録し、manifest.jsonでスプラッシュスクリーン・表示されるアイコン・テーマカラー等を設定しました。
ただ、オフラインキャッシュ・WEBプッシュ周りはサイトのインフラによっては難しかったりするので、無理にやらなくてもいいかな？と思います。まずは以下を対応するとよいと思います。
- アドレスバーの非表示化。
- スプラッシュスクリーンの表示。
- 高解像度アイコンの設定。
- テーマカラーの設定。
- 画面の向き（縦か横か）。
chromeのdeveloper toolsで確認
developer toolsのApplicationタブを開き、Manifestをクリックすると、アプリ名・テーマカラー・向き・アイコン等の情報が表示されます。これは、manifest.jsonを正しく設定すると、表示されるものです。ここを見ながらPWA実装を進めて行くと良いと思います。
ServiceWorkerは、公式リファレンスを見て更新タイミング等を知っておかないといけないので、実装は慎重に行わないと、辺にキャッシュが登録されたりするので、少し慎重に対応した方がよさそうです。
雑感
あまり突っ込んだ話ができませんでしたが、何となくPWAとLighthouseについて知る事ができたと思います。
必ずしもPageSpeed Insights・Lighthouseの点数が高ければいいというものではありませんが、Googleの公式のガイドラインに即しているので、点数が高い方が精神衛生上良いでしょうし、変な方向に施策しないで済んでいる事を知る事ができます。
PWA化を進めるに当たり、まずはサイト自体が高速でないと話にならない（ネイティブアプリと比較して）ので、まずはPageSpeed Insightsである程度の点数を取り、Lighthouseの点数を上げていくといいと思います。PageSpeed InsightsとLighthouseで一部項目が重複しているので、PageSpeed Insightsの点数が高いと、自動的にLighthouseの点数も高くなります。
皆さんご存知だと思いますが、PageSpeed Insightsって実は微妙な点があるんですよね。PageSpeed Insightsは計測しているドメイン以外のドメインも、計測対象に含めてしまいます。例えばGoogleAdsenseを導入している場合、Adsenseによって表示される広告の画像やjsに問題があると、それも採点対象になります。
広告側が残念実装だと、広告のせいで自サイトも原点されてしまって「ウガー！」ってなります。まあ自サイトだろうと広告だろうと、トータルした採点がされて然るべきなので仕方ない事ですが、広告側のチューニングとかできないので、モニョリます。
LighthouseもPerformanceとAccessibilityに残念な部分があります。Performanceは、例えばGoogleAppEngine等を使っていると、もうこれ以上通信速度はどうしようもない面があって、低い点数を付けられてもインフラ的にどうにもならなかったりします。Accessibilityの方は、使用するjavascriptフレームワークによっては、button属性にname要素を追加できない場合があり、それのせいで減点を免れる事ができなかったりします。
このように、広告によって速度を落とされ、インフラによって速度上限が決められ、フレームワークによって特定の要素が設定できなかったりして、色々な面で制限でPWA化の妨げになる場合があったりします。が、そういった部分はPWAの浸透により、ある程度解消される可能性があるので、そこまで悲観する事はないかな？と思っています。
さて、PageSpeed InsightsとLighthouse、どちらもGoogleが掲げる指標ですが、皆さんのWEBサイトでは何点でしたでしょうか？
