PWA を実装する上で、開発者として念頭においておく考えを、web.dev の記事をもとにまとめる。そしてその概要とビジネスへの影響を考え、どこから手をつけるべきか記す。
TL;DL
結論にまとめたが、現在のサービスの性能をを向上させる延長線上に PWA が存在すると捉えて、まずはパフォーマンスの向上から始めるのがよい。
PWA とは
Progressive Web Apps の略称。ネイティブアプリとウェブアプリ双方の利点を兼ね備えた、新たなアプリの形態。Google によって提唱された。
ネイティブアプリとウェブアプリ
Google では、ネイティブアプリの利点は信頼性やコンテンツのリッチさ（Capability）にあるとし、ウェブアプリの利点は自由度の高さ、他のコンテンツとの繋がり、メンテナンス性とった Reachable に存在するとしている。
これらに対し PWA は、その両方の利点を兼ね備えたものだとしている。
PWA の目指すもの
Google は PWA を、ネイティブアプリとウェブアプリの２つの利点を兼ね備えたものと定めている。そして、それを可能とするものは、最新の API だとしている。
これにより、PWA はアプリに求められる大切な条件を満たすことができるとし、Google はこれらを「PWA の指向する 3 要素」として、提示している。
PWA の指向する３要素
- Capable（能力）
- Reliable（信頼性）
- Installable（インストール性）
The three app pillars ;
Progressive Web Apps are web applications that have been designed so they are capable, reliable, and installable. These three pillars transform them into an experience that feels like a native application.
まず、Cabapble（能力）に関して。最近まではネイティブアプリにウェブは劣るとされていたが、WegRTC や geolocation,WebGL, WASM といった技術により十分にネイティブに匹敵するとしている。
次に Reliable（信頼性）。これは主にネットワークにおける WEB の弱点を表している。しかし開発者が適切にオフライン体験を提供することで、この点は回避できると述べている。
最後に Installable（インストール性）。スマートフォンのホーム画面にアプリが追加されることの利点は様々あり、それはいずれもユーザーのアクセシビリティを向上させる。この点で Installability は重要である。また PWA のインストール（ホーム画面への追加）は、ネイティブアプリのそれよりも早く、簡易に可能な点において優れている。
つまり、PWA とは
PWA はネイティブアプリとウェブアプリのいいとこ取りをしたアプリであり、高い能力・信頼性・インストール性をもたらすものだ。
PWA は（そもそも）必要か？
結論として、Google の調査結果によると、PWA がビジネスに与える影響は大きいとのこと。後述する FIRE という要素について、そのうちの Fast については、開発者目線で言えば PWA ではない一般の WEB アプリにも求められる要素であるため、PWA を用いずともその指向を知っておくことには価値がある。
PWA がビジネス改善にもたらすもの
Google のユーザー調査から、以下のことが判明した。
- 通信の遅延に感じるユーザーのストレスレベルは、ホラー映画視聴時と同レベルである。
- 50%のユーザーはアプリを使用せず、モバイルサイトから買い物を行なっている。
- アプリを削除する最も大きな理由の一つに、ストレージの圧迫がある。
- スマホユーザーは類似商品を購入する可能性が高く、85%のユーザーはモバイル通知を役立てている。
上記の調査結果から Google は、ビジネス的観点においてユーザーがアプリに求めるものは、以下の 4 つだとしている。
- Fast
- Installable
- Reliable
- Engaging
これらは頭文字をとって FIRE と呼ばれている。
Google はこれら PWA が可能とする FIRE を活かすことで、ビジネスへの影響を最大化することができるとしている。
FIRE の影響力、そして開発者が意識すべきこと
Google は FIRE の影響力について、およびその改善について開発者が意識すべきことを下記のように述べている。
Fast
ウェブのページスピードは、ビジネスにとても大きな影響を与えるという調査結果がある。
例えば、EC サイト eBay.com での調査によると、「検索時のローディングを 100ms 早くすると、商品がカートに入れられる割合が 0.5％向上する」らしい。
Shopping for speed on eBay.com
開発者は、速度改善のために、Lighthouse を使用した適切な観測を行うこと、
そしてhttps://web.dev/fast/をよく読み、適切なパフォーマンスの向上を測ることが重要だとしている。
Installable
ソフトウェアがインストール可能であることは、顧客の定着を促し、心を掴む。
Weedendesk の事例によると、Weekendesk を PWA 化してユーザーの観測を行なった結果、ホームアイコン経由（PWA 経由）でユーザーが訪問するようになり、結果的にコンバージョン率が 2.5 倍となったとのこと。
この「インストール性」という観点において、PWA は簡単にインストールすることができるという点でネイティブアプリよりも優位に立つ。
また、ユーザーが PWA のインストールを実行した時、開発者はそのイベントを API 経由でキャッチすることができる。
Detect when the PWA was successfully installed
適切にユーザーの利用率を観測することで、開発者はビジネスへの効果を最大化することが可能だ。
Reliable
信頼性に関して、web.dev の記事では、その多くを「オフラインでの快適な使用」に関して割いている。
通信の問題が与えるビジネスへの影響はとても大きく、この点を改善することは重要だ。
例えば、デスクトップ版の Chrome ブラウザの「恐竜ゲーム」は、2 億 5 千万回以上プレイされている。通信が不安定な時にこのゲームがブラウザに表示されることから、ネットワークの安定性について考慮することの重要さが伺える。
開発者は PWA に対してもネイティブアプリと同様に、ユーザーが通信問題を意識しないで済むような設計にする必要がある。
例えばユーザーがオフラインの時にも、下記のような対策を取るべきだとしている。
- 乗車チケットを使用可能
- カートにアイテムを追加できる
- ストアに（簡単に）電話がかけられる
また、ユーザーがオフラインになったことを感知する API も存在するPWA The Superpowers of the Web and Native Apps Combined - Awwwards。開発者はユーザーの情報を適切に取得し、優れた設計を施す必要がある。
Eangaging
PWA のプッシュ通知を使用することで、サービスへの Engaging を高めることができる。
開発者はプッシュ通知をする上では、それが逆効果とならないよう十分注意する必要があり、そのためにPermission UX | Web Fundamentals | Google Developersを参照するとよい、とのこと。
また開発者は、ユーザーの通知に関する情報を API 経由で取得し、改善に役立てることが求められる。
結論
PWA の概要と、ビジネスへの影響を見てきた。PWA を影響力は大きく、検討の価値がある。また、速度・パフォーマンスの向上を目指すという点で通常の WEB アプリと PWA は矛盾しないため、現在のサービスのパフォーマンスを向上させる延長線上に PWA が存在すると捉えてよい。
