Google I/O 2016でデモされたThe Washington PostのProgressive Web Appバージョンを試す

10/3/2017

先日開催されたGoogle I/O 2016で、The Washington Postがテスト版のサイトを公開しました。記事からリンクをたどると、実際に稼働している、テスト版のThe Washington Post試すことができます。

https://www.washingtonpost.com/pr/wp/2016/05/19/the-washington-post-introduces-new-progressive-web-app-experience/

(2016年5月29日: YouTubeのリンクを追加しました)

実際に試してみたところ、

  • 高速なスピード: ページのロードが高速で、記事一覧から見出しをタップして本文が表示されるスピードが非常に早い。
  • リッチなUX: 記事本文を表示している際にスワイプ操作をすることで、前後の記事に瞬時に移動できる。この際のページがスライドするアニメーション効果もスムーズ。
  • オフライン動作: フライトモードにしてネットワークを遮断しても、上記のナビゲーションを行うと記事を移動することができる。表示済みの記事はもちろん、まだ表示していなかった記事も画像以外はレンダリングされた。

と、これまでのウェブ・サイトとは異なる体験を提供していることがわかりました。このデモ・サイトはProgressive Web Appsと呼ばれる技術を使っているということです。

Progressive Web Appsとはなにか?

Progressive Web Appsというコンセプト自体は新しいものではなく、ここしばらくGoogleが広めようとしているもののようです。

こちらは、The Washington Postのプレゼンを受けてDigidayが記事にしたもの。

https://www.washingtonpost.com/pr/wp/2016/05/19/the-washington-post-introduces-new-progressive-web-app-experience/

そしてこちらは、Googleのデベロッパー向けサイト内のProgressive Web Appの紹介ページ。

https://www.washingtonpost.com/pr/wp/2016/05/19/the-washington-post-introduces-new-progressive-web-app-experience/

Progressive Web App Dev Summit 2016というものも開催されるようです。

https://www.washingtonpost.com/pr/wp/2016/05/19/the-washington-post-introduces-new-progressive-web-app-experience/


「Progressive」という言葉は、様々なWebのテクノロジーを個別に使うことで端末ごとにできるかぎり体験をアップグレードしようというコンセプトのようです。

  • オフライン動作
  • スムーズでスピーディーな画面遷移
  • UIアニメーション
  • Push Notification

といったネイティブ・アプリケーションと同様の体験を、ウェブ・アプリケーションでも実現しようというものです。

Service Workerを使ったデータのキャッシュとオフライン環境での利用など、背後で使われている技術については別途追いかけてみたいと思いますが、ひとまずは紹介まで。

ウェブかアプリか?

「ウェブかアプリか?」というのはもう何年も続いている議論で、筆者も2008年(8年前!)に@ITさんにこんな記事を書いています。

https://www.washingtonpost.com/pr/wp/2016/05/19/the-washington-post-introduces-new-progressive-web-app-experience/

ついでだから調べたら、「HTML5とか勉強会」で同じくPhoneGapについて講演をしたのが2012年でした。

4年に一度、この手の話を蒸し返している計算になります。どうでもいい情報ですが。

つまるところ、それだけの期間どちらか一方でという訳にもいかない事情がずっと続いているわけですが、Googleのプレゼンテーションにあったこの数字は、この議論が未だに意味をもつ大変説得力のあるものであると感じさせました。


こちらのブログで、引き続きキャッチアップしていきたいと思います。

シェアする