こんにちは。GMO NIKKOのY.Sです。
先月、Google for Mobileに参加した際に、Progressive Web Appsの話を聞く機会がありました。
スライド資料：「スマートフォン体験を一歩先へ 〜 プログレッシブ ウェブ アプリの作り方」
なかなか興味深かったので、どういう概念でどういう背景があって生まれたのか調べてみました。
Progressive Web Appsはモダンブラウザの新しい機能(一部ドラフト段階の実験的な仕様もある)を使って、アプリのようなユーザー体験ができるようなWebアプリです。ブラウザで表示されるウェブページには変わりないので、レガシーなブラウザでも最低限のコンテンツを表示します。ストアを通してデプロイされない、パッケージされないという点ではハイブリッドアプリとは違います。
拡張された機能で以下を実現します。
- アプリインストールバナー
- 5分以上の間隔で複数回アクセスすると出てくる
- ホーム画面アイコン、テーマカラー、スプラッシュ画面、フルスクリーン表示などを設定可能
- Webプッシュ通知
- GCM利用
- オフライン利用
- Cache API
- アプリのようなUIとインタラクション
- Applicatoin Shell + Content アーキテクチャ
いずれもService Workerを使うため、その要件であるHTTPSまたはlocalhost上でホストしているページが対象となります。
使われている周辺技術はService WorkerやWeb App Manifestなどまったく新しいというわけではないですが、このような技術の組み合わせに名前を付けることでAjaxやレスポンシブデザインのように多くの人に広まり、使ってもらう狙いもあるようです。Progressive Web Appsという言葉・考え方を提唱したAlex Russell氏のブログに、その辺りについて述べられています。
Progressive Web Apps: Escaping Tabs Without Losing Our Soul
また、上記ブログの中で、放棄すべきでないWebの利点・価値として以下を挙げています。
- コアな体系化システムとしてのURLとリンク: リンクできなかったら、それはWebではない
- 人と検索エンジン両方のアクセシビリティのためのマークアップとスタイリング
- 中心となる機能に追加的に提供されるUIリッチ化とシステム拡張能力
- 特別な権限や支払いなしで実装自由、実際のところ、標準ベースを意味する
URLやリンク可能にする考え方は、ネイティブ側でもUniversal LinksやApp indexingなどが出てきているので、Webに限った話ではなく、ともに同じ方向を進んでいると言えます。
Google開発者向けの解説ページでは、Progressive Web Apps
を次のように特徴づけています。
- プログレッシブ ブラウザの選択によらず、あらゆるユーザーに対して動作する。中心的理念としてProgressive Enhancement(プログレッシブエンハンスメント)で作られているため。
- レスポンシブ どのフォームファクタにも適合する： デスクトップ・タブレット・モバイル、次にくる何でも。
- 通信環境に依存しない オフライン環境や低品質の通信環境でも動作するようService Workerで機能拡張される
- アプリライク アプリスタイルのインタラクションやナビゲーションで、アプリのように感じさせる。app-shellモデルの上で作られているため
- 新鮮 Service Workerのアップデート処理のおかげで常に最新である
- 安全 HTTPS経由で配信することで、盗聴を防ぎ、改竄されてないことを保証する
- 発見可能 W3Cマニフェストによってアプリケーションとして識別可能で、Service Workerの登録スコープによって検索エンジンが見つけ出すことを可能にする
- リエンゲージ可能 プッシュ通知のような機能を通してリエンゲージしやすくする
- インストール可能 app storeの面倒さなしで、有用だと分かったアプリをホーム画面にキープしておける
- リンク可能 URLで簡単に共有でき、複雑なインストールを必要としない
Progressive Enhancement(プログレッシブエンハンスメント)は、マークアップされたドキュメント構造でコンテンツの意図が伝わる（セマンティックである）ことを前提として、レガシーブラウザ環境のユーザには最低限の表現でコンテンツを提供しつつ、モダンブラウザなど環境が整ったユーザに対してはよりリッチな表現（ユーザエクスペリエンス）を提供する考えです。このような考えをベースにWebアプリにも展開している、ということが分かります。
実装例
以下、Progressive Web Appsを実装した例として、紹介されているWebアプリです。カバーしている機能が一番多い、Android Chromeで見るとリッチ化されたUXがよく分かります。
- Flipkart インドのECサイト
- Pokedex.org ポケモン情報のサイト
- SUUMO(スーモ) 賃貸・不動産・住宅情報サイト
まとめ
ネイティブアプリが提供する高速で快適なUI/UXや、ネイティブでしか出来ない機能も多いことを考えると、ネイティブアプリの優位性はそうそう低下しないと思いますが、WebはWebでアプリの価値を上手く取り込もうとしています。限定された機能・サービスであれば、Webアプリで十分カバーできるケースも増えてくるでしょう。
一方、Progressive Web Appsを完全にサポートするWebアプリを作るとなったときに、今までとは違った設計・開発が必要なため、それをサポートしてくれる開発ツール・フレームワークなど、これから色々出てくるような気がします。JavaScriptの新しい言語仕様やフロントエンド側フレームワークのトレンドの移り変わりの速さと言い、この分野はしばらく変化が続きそうです。
