プログレッシブ ウェブアプリの概要と期待できそうなこと
※本記事は具体的な実装方法については触れていません。
＜目次＞
プログレッシブ ウェブアプリとは
プログレッシブ ウェブアプリ（Progressive Web Apps [略してPWA]）は簡潔に言うと、「ネイティブアプリのようなWebサイト」。
2015年8月に生まれた言葉で、最新の標準web技術を使うことでユーザーによりリッチな体験を提供する。
特徴
- プログレッシブ・エンハンスメントを基本理念としているため、PWAに対応していないユーザーには従来のサイトを表示する互換性がある。
- レスポンシブ。
- HTTPSであることがマストのため安全。
- アプリケーション シェル（App Shell）モデルに基づいているためアプリ感覚で操作可能。
- 検索エンジンにインデックスされる。
- ホーム画面に追加してワンタップで起動可能。
- キャッシュを用いて高速に動作。オフラインでも閲覧できる。
- プッシュ通知を送信。
- 自動でログイン。
- AMPとの併用が可能。
など、従来のアプリやWebでは実現できなかったことが、PWAでは様々な機能を組み合わせることで実現できるようになっている。
PWAに対応しているサイト
そのほかにも多数存在しており、pwa.rocksで見ることができる。
対応プラットフォーム
Sevice Workerを使用できることがほぼ前提となる。
※Service Workerに対応していないiOS safariに使用ができないのがネックか。
期待できること
特徴で挙げた内容を少し深堀してどう生かせるか考えてみる。
ネイティブアプリで作成するよりもユーザーへの負担が少なく、閲覧がされやすい。
2015年頃の情報だが、一般的ユーザーが1ヵ月で利用する平均的なアプリ数は25個程度。
その中でも3つほどのアプリが使用時間の8割を占めている。（Facebook、LINEなどのコミュニケーション用アプリが主要か）
対して、Webサイトは1ヵ月に100サイト以上見られており、通常のアプリに比べて見られる可能性は高い。
オフラインによる離脱や機会損失を防げる可能性がある。
例えばECサイトにおいて、商品をカートインしたものの決済の場面でネットワークが切れてしまった場合、ユーザーはもう購入を諦めてしまう可能性があった。
しかしService WorkerのBackground Syncを用いればオンラインになったタイミングでデータを送信してくれるので、買い損じを防ぐことができるかもしれない。
※参考：ServiceWorkerのBackground Syncでオンライン復帰時にデータ送信
プッシュ通知によりユーザーに伝えたい情報をダイレクトに伝えることができる。
FacebookやYoutubeのように何か情報のアップデートがあれば従来のメールではなくプッシュ通知を用いてWebでも伝えることができる。
例えば商品の再入荷のお知らせ通知などで効果が発揮できるかもしれない。
▼▼ 以下は比較的新しいAPIによる機能のため対応ブラウザは少ないが今後対応が進めば非常にメリットが大きい機能。
認証情報の入力をスムーズに行える。
Credential Management APIというユーザーの認証情報を制御するためのAPIを用いれば以下のようなことが可能になる。
- id / passwordのブラウザに覚えさせる
- ソーシャルログインの選択肢をブラウザに覚えさせる
- ログイン時にアカウント選択ダイアログを提供する
- ユーザーを自動的にログインさせる
Credential Management API Demo
実装は基本フロントエンド側だけなので比較的気軽に導入できるとのこと。
※デモアプリはこちら
決済方法の入力をスムーズに行える。
Payment Request APIはショッピングサイト上で簡単・高速で一貫性のある決済フローを実現するオープン Web 向けの新しい API 。
ユーザーをフォームから解放し、サイトの標準に準拠した支払情報収集を可能にするW3C APIでもある。
通常はフォームで決済の情報を入力していたが、このAPIを用いることでフォーム自体をなくすことができる。
ブラウザに記録されているユーザーの情報（支払い方法・配送先住所・配送方法）を、簡単・高速かつ一貫した方法でユーザが選択・追加できる、ネイティブユーザインタフェースが使える。
以下のようなサイトは導入するとメリットが大きい。
- これから立ち上がる新しいECサイト
- ゲスト購入が可能なサイト
- クレジットカード情報をあまり持っていないサイト（予めサーバ側にクレジットカード情報があるとメリットが少ない）
まとめ
利点しかないように思えるPWAだが、HTTPS化が必須だったり構築にはそれなりに工数もかかる。
またすでにネイティブアプリがある場合は2重に管理する必要も出てくるかもしれない。
機能も多くあるので、重要なのはたくさん機能を持たせるのではなくプロジェクトに合わせて使用すること。
AMPと同様に今後さらに多機能化、かつWebに求められるハードルも上がってくると思われるので利用される機会は増えてくると予想される。
