AMP

日本でも本格化?次世代モバイルサイト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を皮切りに国内でも対応サイトが増えてくるのが楽しみですね。

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

AMP HTMLとWebプッシュ通知の関係について考えてみました

2015-10-08_0546

先日Googleが提唱したAMP(Accelerated Mobile Pages)というプロジェクト。

このあたりのページに詳しく紹介されていますが、このAMP HTMLというフレームワークを利用して軽量でシンプルなHTMLを作成することでプリ・レンダリングやキャッシュをしやすくし、ネイティブアプリに負けない処理速度でサービスを提供しようというものです。言ってしまえばSmartNewsとかにあるスマートモードをWeb全体でやってやっちゃおう、くらいの意気込みを感じる取り組みでもあります。

続きを読む