Progressive Web Appsというキーワードは2015年くらいに出てきましたが、スマートフォン向けのWebサイトを筆頭として、よりアプリ風なUI/UXが求められるようになっているのは確かです。レスポンシブはもちろん、画面遷移やタップした時のアニメーションなども求められるでしょう。 自分の作っているWebサイトがどれくらいProgressive Web Appsに即しているのか、それを測定できるのがProgressive Web Appsです。

Progressive Web Appsの使い方

Progressive Web AppsにはCLIとGoogle Chrome機能拡張があります。今回はChrome機能拡張を試しています。

実行するとデバッグ中というアラートが出ます。

測定結果です。34点…いえ、そもそもProgressive Web Appsを意識している訳ではないですが。

ベストプラクティスとして実施した方が良い内容が例示されます。

パフォーマンスに関する指標も出ます。

Lighthouseを使うことでProgressive Web Appsに準拠したUI/UXで開発ができるようになるでしょう。この手のトレンドはほぼ毎年のように変わるので、Lighthouseの提示が最終的な答えという訳ではないでしょうが、より先進的なWebサイトが作れるようになるでしょう。

LighthouseはGoogle Chrome機能拡張/node/JavaScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。

Lighthouse - Chrome ウェブストア GoogleChrome/lighthouse: auditing and performance metrics for Progressive Web Apps