体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

Google宇都宮佑亮@uskay氏が語る「今からでも遅くない!Progressive Web Apps超入門」

Google宇都宮さんによるPWAの基本解説

2017年12月19日に開催された「html5j Webプラットフォーム部 第19回勉強会」が取り上げた技術は「Progressive Web App(PWA)とWebAssembly(WASM)」。ロードが遅い、通知が出せない、実行が遅いというWebアプリが抱える課題に有効な技術だ。

今回の勉強会の目的はこの2つの技術を活用して、「Hello world」を作れるようになること。PWAとWASMに関して日本で3本の指に入るとも言われるエキスパートたちが講師を務めた。

最初に登壇したのはGoogleに所属する宇都宮佑亮@uskay氏。セッションタイトルは、「今からでも遅くない!Progressive Web Apps超入門」。Googleではモバイルソリューションコンサルタントというロールを担っている。

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コンテンツが入ってきている。

1 2次のページ
CodeIQ MAGAZINEの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。