Webアプリはネイティブアプリと比べてロードが遅い、通知が出せない、実行が遅いといった課題を持つ。だがProgressive Web AppとWebAssemblyを活用し、ネイティブアプリと遜色のない速さを実現させたサイトも登場している。html5j Webプラットフォーム部では今回「Progressive Web AppとWebAssembly」をテーマに勉強会を開催した。
今回の勉強会の目的はこの2つの技術を活用して、「Hello world」を作れるようになること。PWAとWASMに関して日本で3本の指に入るとも言われるエキスパートたちが講師を務めた。
最初に登壇したのはGoogleに所属する宇都宮佑亮@uskay氏。セッションタイトルは、「今からでも遅くない！Progressive Web Apps超入門」。Googleではモバイルソリューションコンサルタントというロールを担っている。
Google宇都宮さんによるPWAの基本解説
2017年12月19日に開催された「html5j Webプラットフォーム部 第19回勉強会」が取り上げた技術は「Progressive Web App（PWA）とWebAssembly（WASM）」。ロードが遅い、通知が出せない、実行が遅いというWebアプリが抱える課題に有効な技術だ。
Webの利点はリーチ力が優れていることだ。20億デバイスとつながっており、Web全体では50億デバイスとコンテンツ配信ができる。こんなエコシステムはない。
だが、Webは電車やバスの中ではロードが遅かったり、レスポンシブでなかったり、コンテンツが動き回ったり、画像が上から差し込んでレイアウトがずれたりするものもある。
2015年にChromeのチームに指標によると、ロードは1秒以下。今ではTime to Interactiveでも5秒以下が良いと言われている。これを満たすべく、Webにはパフォーマンスを改善することが求められている。
それ以外にも課題はある。先述したようにWebはリーチ力が優れており、トップ1000のモバイルAppsとモバイルWebパフォーマンスのトラフィックを比較しても3～4倍Webの方が多いが、一方でアプリのほうがちゃんと使われている。
ではなぜアプリが使われるのか。それはアプリが次の点に優れているからだ。
- ホームスクリーンに追加できる
- 一貫したUI＆オフライン対応
- プッシュ通知
- 常にログイン状態
- 簡単な支払いなどができる
つまりWebの課題はスピードに加え、アプリ同様にできることを増やすこと。それを可能にする技術も出ている。
スピードアップについてはAMP（Accelerated Mobile Pages）、エンゲージメント、リエンゲージメントをリッチにするためにはPWA（Progressive Web Apps）を使う手法がある。AMPが初回表示を爆速で行い、PWAが信頼のおけるエンゲージメントを実現する。
PWAでアプリ同様の機能をWebページで実現する
PWAを使えば、Webページでもアプリと同様の機能が実現する。ブラウザでできなかった機能をブラウザのプラットフォーム上に追加する。ただし今のところ新しい機能なので、全てのブラウザで使えるわけではない。
PWAはホームスクリーンへの追加を可能にする。その参考になるのが「トリバゴ」というホテル料金比較ページ。このページにアクセスしてしばらくすると下からプロンプトが上がってくる。
そこに「ホームスクリーン追加」という文言があるので、タップして追加。それをタップするとフルスクリーンで起動する。
ユーザーからするとアプリなのかWebなのかわからない。実装するのも簡単で、json形式の設定ファイルを作ってそれを定義して、プロンプトを出したいページにリンクタグに紐付けるだけ。スクリプトやService Workerをインストールする必要があるが、これだけの作業で実装できる。時間は10分ぐらい。
だがいままでは、プロンプトが出るタイミングをコントロールできなかった。json形式のファイルを持っているWebページを訪れるたびにプロンプトが開くというのは、ユーザーからするとあまり気持ちの良いものではない。
そこでChromeではユーザーがエンゲージするのを裏で計っており（エンゲージメントスコア）、それがある閾値を超えないと出さない仕様にしているが、出てほしくないタイミングで勝手に出す可能性もある。
プロンプトが表示される直前に、beforeinstallpromptというイベントが発火されるので、そこを監視して、表示させたくなければプロンプトをキャンセルするようなコードを書く。またボタンを押すなどの行為をした時に、プロンプトを出すようにする。
これがTarget Prompting。2015年にはじめてPWAで作られたインドのECページ「Flipkart」で採用されている。
現在、同ページでは購入完了のタイミングまでホームスクリーンへ追加のプロンプトを出さないようにしている。このような方法を採用したことで、ホームスクリーンに追加するユーザー数を3倍に増やしたという。
Androidの場合、PWAで作ったWebページはアプリと認識されるので、アプリの設定画面から通知のオンオフもできる。
Microsoftでもjsonのマニュフェストのファイルを持っており、かつトラフィックの多いページの一部で、Windowsのappストアで公開できるようになる可能性があるという。このようなアプリの聖域であるマーケットプレイスにWebコンテンツが入ってきている。
ホームスクリーンに追加はできた後は、爆速ヌルヌルWeb体験をしたい。そんなPWAを作るために、参考にしたいのが、「wego」というシンガポールのトラベル会社のページだ。
同社ではアプリも提供しているが、そのアプリと比べてもパフォーマンスはほぼ変わらない。App ShellというPWAで推奨されている画面構成を採用している。
静的な要素（ヘッダーや横から流れるサイドメニュー）は、各ページにおいて共通なので、毎回サーバからリクエストからレスポンスで取ってくる必要がない。そういうものはWebでもインストールしておく。それ以外の要素はサーバに問い合わせて取ってくる。
インストールと同じようなことができるようにするのが、Service Workerという新しいWebモジュール。ブラウザにひっつくプロキシみたいな役割をするため、ネットワークの監視などができる。
ServiceWorkerで面白いのは指定したリソースを先読みし、独自に用意したストレージに保存することができる。HTTPのストレージとは異なる堅牢なストレージに保管できるので、まさにアプリで言うインストールのようなことができるというわけだ。
それ以外のPWAの特長は、PWAチェックリストを見ればわかるが、WebAppマニュフェストを用意し、スクリーンへ通知できること、起動URLがオフラインでもロードされること、3Gネットワークでも速い表示であること、ページ遷移がネットワークに依存せずスムーズであることなどが挙げられる。
パフォーマンスチューニングも必須
Webのパフォーマンスチューニングに欠かせないのが、まずはパフォーマンスのオーディットをしてみることだ（現状分析）。お勧めはChromeチームが開発しているオーディットツール「Lighthouse」。簡単に使えるので、ぜひ試してほしい。
Lighthouseの良い点は、対応するとどのくらいの改善を見込めるかも教えてくれるところ。優先順位付けができるのだ。
とはいえ、オーディットツールだけに頼るだけではなく、デベロッパーツールのパフォーマンスのタブを使って中身を見ることや、どこに改善の余地があるのか把握することも重要だ。最近の厳しいパフォーマンスの世界でいうと、最初のロードにかかるクリティカルパス（JS、CSS、HTML）に必要なリソースは170KBに収めることと言われている。
ファイルサイズの部分でも意識する必要があるということ。そこを意識すると速いWebページができる。Webにおいて、立ち返る場所は「阿部 寛のホームページ」。
スクリプトも何もない、美しいWebページ。Webは本来このぐらいのスピードが出せるということを常に頭に置いておくことだ。
パフォーマンスの改善についてさらに詳しく知りたい人は「超速！Webページ速度改善ガイド」を読んでほしい。
PWAを使うと、Webでもプッシュ通知ができるようになる。ただ、プッシュはユーザーがわかるような導線を意味付けしてあげることが重要になる。その端的な例がランコムのページだ。
Webのセッションが切れても、そのたびにIDやパスワードを入力することなく、マネジメントしてくれる技術がある。それが、Credential Management APIといって、ドメインに入力したことのあるIDとパスワードをブラウザに保存し、再利用する技術。これを使えば常にログイン状態の形が実現できる。
ECページは支払い情報の入力フォームはたくさんあるが、どれも同じ内容を入れるのに違うレイアウトなのでまた入れ直さないといけない。ブラウザが支払いのフォームを提供しようというのが、Payment Request API。このようにユーザーが便利であろう機能をブラウザが提供するようになっている。
最後にどこから始めればよいのか──大事なのはプログレッシブエンハンスメントという考え方だ。そして徐々に機能拡張していけばよい。
つまりWebページのパフォーマンスチューニングをやりつつ、その上で個別にホームスクリーンを追加したり、オフライン対応したり、プッシュ通知したりと個別に要素技術をトライし、計測して、うまくいけば拡張していくことだ。
それを実現しているのが、「ベルーナ」という通販会社のページ。Googleが注力するAMPとPWAの採用でモバイルコンバージョンをさらに加速させている。一度にすべてをやる必要はない。徐々に拡張してテストしていいものだけを残している。
最後に進化論で有名なダーウィンの言葉を贈る。「最も強い者が生き残るのではなく、最も賢い者が生き延びるでもない。唯一生き残るのは、変化できる者である」。変化を怖がらずに変えていくことにトライしてほしい。
関連ページ
イベントの様子は動画でも公開中
※本記事は「CodeIQ MAGAZINE」掲載の記事を転載しております。
8,568通り、あなたはどのタイプ？
グッドポイント診断で、あなたの隠れた強みを診断してみましょう。
診断結果は8,568通り。あなたはどのタイプ？
あなたの新しい可能性が見つかるかも
リクナビNEXTにログインすると、あなたの志向に合った特別な求人一覧を見ることができます。
予想外の求人が、あなたの世界を広げるかもしれません。
