Smartphone スマホ

 
スマホ

モバイルWebがもっと便利になる! Chrome50の新機能

mobilelab_160406

Google Chromeのバージョン50がベータ版として公開されました。更新内容は多数ありますが、その中でも注目すべき機能を3 つ紹介します。

PUSH通知にペイロードが備わった

ブラウザからユーザーに直接メッセージを送ることができるPUSH通知機能はユーザー・エンゲージメントを高めようとする際に魅力的な機能です。WebPUSHを検討する際に必ず懸念となるのが、特定のユーザーにだけメッセージを届けたいという属性配信、いわゆるセグメント機能が使えるかという点があります。

今まではPUSH通知が発信されるとそれをすべて受信するしかなく、例えばユーザーが特定のカテゴリのメッセージしか受け取らないようにするためにセグメントを実装するには、カテゴリごとに別のPUSHを用意するような無駄な処理が必要でした。

50p

(左:従来のWebPUSH。ServiceWorkerはすべての通知を受け取る | 右:ペイロードのあるメッセージはServiceWorkerが受信する/しないを選べる)

Increase Engagement with Web Push Notifications | Chrome Dev Summit

今回のアップデートによって、メッセージの内容を確認した上で受信するかどうか決めることができるようになりました。決めるといっても、ユーザーが毎回メッセージの内容を確認するのではなく、WebサイトでPUSH通知を許可した時に作られるServiceWorkerがメッセージを取得するかどうか判別して表示させるというものです。

背景としては同じWebApp(サイト)を複数(異なるユーザーや別のデバイスで)登録した時に通知メッセージが同時にいくつも流れたり、ネットワークが不安定な時にエラーとなってしまうのを防ぐことが本来の目的のようですが、メッセージの種類を判別できるようにすることでセグメント配信が可能になります。

配信側でメッセージを暗号化する必要がありますが、今後のPUSH通知はペイロードの実装が標準となることは間違いなさそうです。

リソースのプリロード

モバイルWebが主流となった現在、サイトの表示スピードは改善すべき最重要課題となっています。GoogleはAMPプロジェクトを検索結果への導入をはじめましたが、これはあくまでも検索結果やタイムラインといったプラットフォーム上でコンテンツを素早く表示させるための補助的なもので、サイト本体を速くするにはパフォーマンスチューニングが必要です。

RAIL

(図:GoogleのRAILパフォーマンスモデル。最初に識別できる要素は1000ミリ秒以内にロードされるのが理想)

Introduction to RAIL | Chrome Dev Summit

とりわけファーストビューをいかに早く表示されるのかが重要となる中、あらかじめ必要になる要素を先にロードできるようにするのがとなります。使い方はCSSやJavascriptの中に記述されているリソースにプリロードを指定することで、今までは実行途中で必要になったタイミングで改めて読み込むことになるリソースを先にダウンロードして準備しておくことができます。

同じような先読みとしてというのは以前からありましたが、これは遷移先のページで必要になる要素をダウンロードしておくというもので、100%確実に利用されることはないものです。一方、rel=”preload”はそのページで絶対に必要になるものを先に読んでおくという点で異なります。

canvas要素のBLOB変換

3つ目はモバイル向けというわけではないですが、canvas要素をtoBlob()メソッドを使うことで直接保存・送信できるようになりました。canvasに生成した画像をサーバに格納するときは今まではbase64エンコードをしてテキストデータとして送信する必要がありました。toBlob()を使うことで直接画像データに変換して保存できるようになります。

以上の機能はChrome ベータ版やChrome Canaryで利用することができます。

Try out Google Chrome Beta | Chrome beta

ウェブの最先端を体験 | Chrome

(正式版ではないので注意してご利用ください)

その他のアップデート情報は公式ブログで確認できます。

Chrome 50 ベータ版: プッシュ通知の改良、宣言型プリロードなど | Google Developers Japan

webpush600_315

この記事を書いた人
大賀 匠竜
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事