Edited at

GoogleのPWA Roadshowの話(1)

More than 1 year has passed since last update.

2017/9/22に開催されたGoogle主催のProgressive Web Apps Roadshow Tokyo 2017に参加したので、その時に聞いた話を自分なりの解釈をもとにざっくりとまとめてみました。

正確な内容が知りたい場合は、以下のURLより講演で使用されたスライドを参照してください。

https://goo.gl/ESUahe


PWAとは

PWA(Progressive Web Apps)とは、Webアプリケーションをホーム画面に追加し、オフライン状態での利用、PUSH通知などによりネイティブアプリのように利用できるようにすることでUXを向上させること。

本質としては、UXを根本的に向上させることであり、機能などではなく概念を表す。


Chapter1:Progressive Web Apps


なぜPWAが必要なのか

最近ではモバイルの利用者数が多くなってきており、さらにモバイルの利用率としてはWebサイトよりアプリの方が圧倒的に高い状態になっています。(資料では、Webサイトが13%、アプリが87%)

しかし、アプリは一部のものばかり使用されており、新しいアプリをインストールすることもあまりないのですが、Webサイトに関しては幅広く利用されている傾向にあります。

そこで、Webサイトの利用範囲の広さとアプリのような使いやすさを満たすことでUXを向上させようというのがPWAの考えです。


PWAで重要なこと

PWAを構築するために重要なこととして、4つのキーワードがあり、それぞれの頭文字をとってFIREと言います。

F:Fast(ロード時間を速くする)

I:Integrated(Webを意識させない(ホーム画面に追加))

R:Reliable(オフラインでも動作する)

E:Engaging(関心を引く(PUSH通知))

各項目の細かい内容は、次章以降で説明されます。

上記を実現するものの一つとして、Service Workerがあります。

また、サービスの安全性を確保するためにHTTPS化が必須となります。

ほとんどのAPIがHTTPS化していないと使用できないとのことです。


PWAを始めるには

PWAを始めるにあたって、いくつかの取り組み方があります。

From the ground up(全体を一から作る)

a simple version(簡易なバージョンで作成する)

a single feature(1つの機能を作成する)

一から作り直すのか、どれかの機能に絞ってやるのか、システムによって取り組み方は柔軟にできそうです。

しかし、大事なことはどれが一番UXの向上に繋がるかということ。

それを念頭に取り組むのが良いと思います。


おわりに

ここでは、PWAがどういうものかということをざっくりとまとめてみました。

この話を聞くまでは、PWAというのはアプリのように使えるようにする機能を指すのだと思っていたので、少し驚きました。

次からはPWAを実現するための話をまとめていきたいと思います。

GoogleのPWA Roadshowの話(2)