Chrome

日本でも本格化?次世代モバイルサイトPWA(Progressive Web Apps)の5つのメリット

スクリーンショット 2017-04-13 14.44.32

先日話題になったTwitter Liteのリリース。私も使ってみましたが、とうとうWebでアプリ並のことが本当できるようになったのか、とちょっと感動しました。

しかもネイティブアプリよりデータ通信量が最大70%抑えられるとのこと。
通信量って日本だとたいしたメリットないのかなとも思っていましたが、最近の格安スマホやMVNOの料金プランを見ているとまだまだ通信料削減のニーズはありそうで、そんな文脈からも新興国だけでなく日本でも普及しそうな気がします。

このTwitter LiteのUXを実現する上でキモとなっているのがPWA(Progressive Web Apps)という仕組みです。
Googleによって推進されており、今までネイティブアプリでないと実現できなかったUXやブラウザからのプッシュ通知といったエンゲージメント施策をモバイルWebアプリでも実現できるというのが最大のポイントです。

※プッシュ通知など一部機能はPCブラウザでも利用可能です。また、2017年4月現在はAndroidとデスクトップ版ChromeやFirefoxに対応しており、Safariはまだ対応していません。

PWAの概念ははちょっと前からあって、Googleのイベントでも複数回取り上げられています。このへんの動画を見ておくとより深く理解できると思います。

PWAのメリット

さてこのPWA、具体的には何がメリットなのでしょうか?
簡単に言うと「エンゲージメント向上と使い心地がネイティブアプリ並のモバイルWebアプリ」といえます。
それを構成するポイントを5つまとめてみました。

①Webプッシュ通知

Webに対するアプリの最大の優位性と言ってもよいのがプッシュ通知です。
PWAではService Workerというブラウザの裏側で動く仕組みを活用することで、許諾を得たユーザーに対してプッシュ通知を配信できます。
モバイルWebだけでなくデスクトップのブラウザに対しても配信可能です。
国内でもサードパーティの配信サービスがいくつかあり、本ブログを運営するPushnateでも手軽に無料でWebプッシュ通知を配信できます。

TwitterLite_Android_PushNotification_ENG_1

Twitter LiteからのWebプッシュ通知

②ホームスクリーンへのアイコン追加

スクリーンショット 2017-04-13 23.25.09

ホームスクリーンにTwitter Liteのアイコンを追加

PWAで構築されたサイトは、訪問頻度によりホームスクリーンへのアイコン追加を促す仕組みがあります。
今までもブックマークとして追加はできましたが、サイト側から促せるのが大きな違いです。
ネイティブアプリと大きく違うのが、Webサイトをある程度使ってから(エンゲージメントが確立されてから)表示されるということ。よりサービスへの理解が高い状態でインストールされるようなイメージです。

③オフラインでのコンテンツ表示と読み込みの高速化

Service Workerはオフラインキャッシュの仕組みも持っており、サイトの主要なデータをキャッシュしておくことでオフラインでの利用や読み込みの高速化を実現できます。

④WebなのにアプリっぽいUX

PWAはブラウザで動作しますが、アドレスバーを非表示にしたり、起動時にスプラッシュ画面を表示することができます。これだけでもグッとアプリっぽい使い心地になります。

⑤Webならではの利点

当然ですがネイティブアプリのようにOSに合わせた開発やアップデート、ストアの審査が不要です。URLがあるのでアクセス解析ツールなどそのまま使えますし、検索エンジンへの対応もWebサイトとして行えるので、開発やメンテナンスの手間を軽減できます。

また、最近話題のAMP(Accelarated Mobile Pages)とも連携できます。検索経由でAMPページにアクセスしたときにServiceWorker登録、Webプッシュ配信といったことも可能です。

PWAを導入するには?

そんなメリットだらけのPWA、さっそく試してみたいという方もいらっしゃると思います。実装にはJSONマニフェストの設定やService Workerに関する記述などが必要ですが、その前にいくつか検討すべきポイントがあります。

既存サイトやアプリを含めた導線設計

すでにモバイルWebサイトやアプリが存在する場合、PWAの位置づけを確認しましょう。

Twitetr Liteのように元のサイトとは別の存在とするケースもあります。何も考えずに作ってしまうと、元サイトとコンテンツが重複したり、アプリも含めてメンテナンスが必要になったりとコストばかりかかってしまう可能性もあります。

PWAによってどんな価値が提供できるかをしっかり確認しておきましょう。

SSL導入が必須

PWAにはSSL導入が必須になります。
SEO的な潮流としてはSSL導入は常識になりつつありますが、必ずSSL対応の否について確認しておきましょう。

実装時にはPWAチェックリストでチェック

実装後はGoogleのPWAチェックリストでPWAの要件を満たしているかを確認しましょう。

まとめ

近年、スマホ1台あたりのアプリインストール数は減少しつつも利用時間は伸びています。

反面、Webサイトは接触頻度においてアプリを上回っています。Webの特性と活かして、様々なチャネル(ソーシャル、参照サイト、検索エンジンなど)からの導線を設計しつつ、アプリ並の利用時間も狙っていく、しかもWebの技術で構築できるというのがPWAのメリットだと思います。

サイトやアプリの内容によっては大きくユーザーを増やせすチャンスかもしれません。Twitter Liteを皮切りに国内でも対応サイトが増えてくるのが楽しみですね。

PWA(Progressive Web Apps)がよりネイティブアプリっぽくなりました

2016年のGoogle I/Oで触れられていたPWAとAndroid連携の動きについてChromium Blogの投稿がありました。

すでにホームスクリーン追加やWebプッシュ通など個別の機能は実現していますが、この統合により今まで以上にWebサイトをアプリ的に取り扱えるようになります。今回はホーム追加時の動作がアプリインストールぽくなりました。個人的に大きいのは、Webプッシュからこの疑似アプリの起動ができるようになることです。よりPWAらしいUXになります。

リテンション獲得のためにネイティブアプリ作りたいけどコストが・・というサイト(主にECサイトかな?)は短期間で効果が出やすそうです。日本では依然としてiOS対応が課題ですが、Androidシェアの高い国ではPWAそろそろ普及しそうですね。ホームスクリーン追加が実装済みのWebサイトは、以下の手順でアプリインストールっぽい使い心地が試せます。

①Chromeの試験運用機能をONにする

Chrome Betaで、chrome://flags/#enable-improved-a2hs を入力し、試験運用機能の管理画面に入ります。
ここで、「ホーム画面に追加(改訂版)」を有効にします。Chromeの再起動を促されるのでそのまま再起動します。

②対応サイトにアクセスしホーム画面に追加する

たとえば、flipkartなどPWAの事例サイトにアクセスしてみます。Chromeのメニューを開くと「ホーム画面に追加」があるのでタップしてみましょう。インストールの許可画面が表示されますのでそのまま進めます。
Screenshot_20170209-002138

ホーム画面に追加

Screenshot_20170209-002500

インストール許可画面

インストールすると他のアプリと同じように一覧に表示されます。

Screenshot_20170209-002704

アプリドロワー内に一覧表示される

Chrome単独の取り組みから始まったPWA周りですが、今後はAndroidと統合の流れが強くなりそうです。なんというかちょっと昇格するイメージですね。正直、特に日本においてはまだまだPWAの取り組みは少ない印象ですが、少なくともGoogleの力の入れようは伝わってきますね。
こちらも合わせてどうぞ。

Chrome Dev Summit 2016 が開催、いよいよPWAの活用が本格するかも!?

スクリーンショット 2016-11-16 23.58.02

先週、Chrome Dev Summitがさりげなく開催されていました。日本だとあまり話題になっていない感じですが毎年やっているやつですね。去年の今頃だとこんな記事を書いたりしました。去年はWebプッシュ通知やService Workerなど一つ一つのトピックが細かい印象でしたが、今年はProgressive Web Apps(PWA)ワードで一括りになって前面に出ていました。個別の技術だとCredential ManagementPaymentなど新しめのAPIの紹介がありました。

日本において、スマホでブラウジングしている限りはPWAはおろか、Webプッシュですら普及はまだまだこれからかな。。という感じですが、Chromeはどんどん先に進んでいますね。

ところで先日、Publickeyさんの記事でGartner Predicts 2017の「2019年までに、ブランド保有企業の20%は自社のモバイル・アプリを放棄する。」という気になる項目を見つけました。

以前ブログでも触れましたが、アプリとWebにおける利用時間や頻度には大きな差があるということをふまえるとなるほどと思いました。たいていのブランド保有企業では、ネット上で高頻度かつ長時間過ごすほどの体験を提供し続けられません。となるとアプリとして存在する価値を保持するのは難しく、結果として主要プラットフォームを通じて(広告出稿のかたちで)消費者と接触するしかないということなのかもしれません。ブランド側からするとプラットフォーム依存が深まってしまうわけですが、そこに対する対抗策の一つが、Webとネイティブアプリのいいとこ取りができるPWA化なのかもしれないですね。

Chrome 52 のデベロッパーツールでService Workerのチェックができるように

ついにChrome 52の安定版がリリースとなりました。

話題の大きさでいうとバックスペースキーで戻れなくなった件とかタブのデザインが角ばったことのほうがメジャーではありますが、実は今回デベロッパーツールにも変更がありました。「Application」タブからService Workerなどプログレッシブウェブ関連の検証ができるようになったのです。今までserviceworker-internalsを見たりしていましたが、今回の変更でここからプッシュを表示したりなどいろいろできるようになりました。その他にもホームスクリーンへのアイコン追加などService Worker / Webプッシュ以外のPWA関連の検証ができるようになっています。

先日、AMP上でのService Workerインストールの話もありましたが、ついにGoogleも本気でこのへんをプッシュしてきた感がありますね!

スクリーンショット 2016-07-21 23.29.08

Webプッシュマーケティングにおける6つのトピック(Google I/O 2016から)

先日開催された「Google I/O 2016」の中で「Deep user engagement with web push notifications」というセッションがありました。

他にもプログレッシブWeb関連のセッションがいくつかあり、その中でWebプッシュに触れているものもありましたが、単独で扱っているのはこのセッションだけでした。というわけで、本セッションの内容から特にマーケティング的に重要そうなポイントを6つピックアップして紹介したいと思います。(Web Push プロトコルの話など一部割愛している箇所もありますので詳しく知りたい方は動画もご覧ください。)

続きを読む

Chrome 50 ベータ版にて待望のペイロード機能が加わります

先日、Googleの日本語ブログでもお知らせがありましたが、Chrome 50 ベータ版が公開されています。

サイトからプッシュ通知を使って、ネイティブ アプリケーションと同じ方法でシステムレベルの通知をトリガーできるようになりました。

ついに待望のペイロードが実装されます。

最新バージョンの Chrome では、サイトで通知データのペイロードをプッシュ メッセージに含むことができるようになるため、サーバーの確認は不要になります。ユーザーのプライバシーを保護するため、プッシュ通知のペイロードは暗号化しなければなりませんプッシュ通知のペイロードPush API 仕様の一環であり、Firefox では既にサポートされています。

今までとは少し通知の仕方が変わることになります。そしてすでにFirefoxではサポートされているとのこと。
今までもこのブログではペイロードについて触れてきましたが、当初の予定である49ではなく、50での実装となりました。

今まではWebプッシュ通知といっても、実質固定のメッセージをユーザー全員に表示するという仕組みでしたが、これによりユーザー行動や属性に合わせたプッシュ通知が可能になります。やっとブラウザでもネイティブアプリと同じレベルで使えるようになるということです。(Facebookのように力技でそれを実現していたケースもあります)

JavaScriptコードを設置するだけでプッシュできるということもあり、これまでは個人ブログや小規模サイトで使ってみるというケースも多かったですが、これからはよりサイトと密接に結びついているような、Webサイトのユーザー体験全体に関わるような使い方も出てくると思います。

Chrome 50が正式版になり、それが行き渡るまでは少し時間かかりますが、今年の年末にはペイロードを使ったプッシュが普通になるのかもしれませんね。

2016年 Webプッシュで起きそうな3つの予測

スクリーンショット 2016-01-13 0.21.39

あけましておめでとうございます。
1月もすでに10日以上経ってしまいましたね。。いかがお過ごしでしょうか。

さて、2015年3月のChrome 42から可能になったService WorkerによるブラウザからのWebプッシュ通知配信、それから1年近く経ちChromeはバージョン47となりました。ここまで大きな変化はまだありませんが、バージョンアップごとに確実に何かが追加されています。
しかしまだ1年たっていないのが個人的にはちょっと驚きです。

Chromium Projectsのページを見てみると2016年はバージョン56までいく予定のようです。そして現行の次となる48、49あたりではカスタムボタンやペイロードによるデータの扱いなど今までなかったタイプの仕様追加が予定されています。56になる頃にはどうなっているのか想像もつかないですが、最近の傾向を見ていると、一方通行的なメッセージではなくWebサイトの機能やユーザー体験の一部を担うような仕組みとして成長していくのではないかなということ。メッセージとして考えれば配信数や到達率、開封率といった指標がメインですが、もう少しエンゲージメント寄りの指標(再来訪率とかプッシュ許諾率など)がベースになってくるのかも。

というわけで今日はせっかくなので2016年中に起きるんじゃないかという予想を3つほどピックアップしてみたいと思います。

続きを読む

カスタムボタンが実現するWebプッシュ配信におけるエンゲージメント

またもやChrome Dev Summitネタですが、Chrome 48 Betaより、カスタムボタンが使えるようになりました。プッシュ通知内に、サイト内で行えるアクションを設定できるというものです。

こんな感じでプッシュ通知内にアクションが表示されます。

Screen Shot 2015-12-03 at 12.37.52 PM

このケースでは、天気予報サイトからの「明日の朝は雨ですよ」というプッシュに対して行えるアクションを提示しています。ここでは、

  • 後でリマインドしてもらう
  • タクシーを手配する

という2つのアクションが行えます。

もともとAndroidではネイティブアプリでもiOSと異なり通知内でアクションできるようになってはいましたが、ブラウザで動作するWebプッシュではURLベースで設定できるので、だいぶその実践の敷居が下がった感があります。

これをベースにどんな使い方ができるか、ジャンルごとにいくつかピックアップしてみました

ショッピングサイト

・ショッピングカートで離脱してしまった人に再度購入を促す
・売り切れだった商品の入荷があったタイミングで通知
・特定商品の値下げ時に通知
・オークションサイトで高値が更新されたときに通知、すぐ入札できる 

予約系(宿泊や出前、交通機関など)やサービスEC

・過去の利用履歴から、次に予約しそうなタイミングに通知
・宅配ピザなどで、暇な時間帯に限定して割引オフォー
・定期的に使うサービス利用をリマインド

ソーシャルメディアやコミュニティサイトの場合

・メッセージがあったときにすぐ返信できる
・知人の投稿に対してブラウザを開かずに「いいね」できる

「アクション」というだけあってメディア系のサイトより、ショッピングなどいわゆるコンバージョンが存在するサイトとの相性が良さそうです。

これらは10月初めの記事でも触れていたことではあるのですが、カスタムボタンになることで複数の選択肢を提示でき、かつアクションすることを前提としたUIにより文脈的なわかりやすさがアップしています。もともとWebプッシュはメールのような一方的なメッセージよりもユーザーとWebサイトのインタラクションの中で有効に作用するのだろうと思っていたので、カスタムボタンによりその方向性が強くなりました。

あと、ちょうど先日schema.orgによる店舗やローカル系の検索結果でのAction指定のトピックがありましたが、機能的には近そうです。検索エンジンの場合ある程度初回訪問が含まれますのでアクションへの結びつきやすさは違うのかもしれません。このへんの動きはまだまだ加速しそうですね。

カスタムボタンの実装方法

JavaScriptでの設定の仕方など技術面については、我らがPushnate開発担当の書いたQiitaの記事も合わせて読んでみてください。PushnateでもChrome 48 Betaが正式になるタイミングを目処にカスタムボタン設定を使えるようにしたいと考えています。

Webプッシュ通知にカスタムボタンが実装できるようになったので試してみた

 

Chrome Dev Summit 2015 から考える、Webプッシュ通知の今後

前回の記事でも書きましたが、11月17〜18日にChrome Dev Summit 2015が開催されました。ブラウザをフィーチャーしたイベントは日本ではなかなかないので新鮮ですよね。

Webプッシュについては「Increase Engagement with Web Push Notifications」というセッションがありました。Webプッシュのみの内容で25分ほどとなかなか見応えがあるセッションです。今回はその中で触れられていたトピックを紹介しつつ、今後Webプッシュはどんな役割を果たすのかについて考えてみたいと思います。

続きを読む