最近SEOやらライティングやらのことばっかりやっていて、 全然コードを書いていないし技術情報のキャッチアップも出来ていないのでちょっとなんとかしたい。

ところで最近、Progressive Web Apps(PWA)とやらが話題らしい。 これはAMPと同様でかなり実用的な線を走っていると思うので、早めに触っておこうと思う。

ていうか最近、AMPやらPWAやら、よくわからない3文字が増えてきたね。

ちなみにGoogleサーチクオリティチームのPedro Dias氏も、SEOやってるのにPWAやってないのはありえないよね〜(超訳)みたいなことを言ってる。

頑張って調べたりしていますが、この記事は誤りが多そうなので鵜呑みにしないでください。

Progressive Web Apps?

Progressive Web Appsは、僕の今の認識ではWebサイトの実装方針についてのものなんだと思う。 これを理解する前に、Webサイトとネイティブアプリの現状について整理したい。

ネイティブアプリの現状

非エンジニアがエンジニアの仕事に抱くイメージとして、代表的なものはWebサイトかスマホアプリなんじゃないでしょうか。 でも、TechCrunchにこんな記事があります。

Nearly 1 in 4 people abandon mobile apps after only one use | TechCrunch

Localyticsの統計を見る限り、ネイティブアプリは継続的に利用してもらうのがむずかしいと。 ここで出てきたのが、Google I/O 2016で発表されたInstant Appsですね。

Google takes a new approach to native apps with Instant Apps for Android | TechCrunch

Webサイトから断片的なアプリを瞬時にインストールして起動させるというもの。 これは今どうなってるんだろう、正直第一印象は無茶な話だなと思った。

とはいえネイティブアプリも廃れるとは思ってないし、ただ作るだけじゃなくてマーケティングやらが結構難しいよねっていうレベルの話だと思う。

Progressive Web Appsが実現するもの

Progressive Web Appsは、Webサイトでもネイティブアプリと同等の快適さを作り上げるための実装方針の話で、 Service WorkerやHTTP/2 Server Push、Web App Manifestとかをこんな感じで利用すればいいんじゃないっていう概念的な話だという認識。

プログレッシブ ウェブアプリはウェブとアプリの両方の利点を兼ね備えたアプリです。 ブラウザのタブで表示してすぐに利用することができ、インストールの必要はありません。

使い続けてユーザーとの関係性が構築されていくにつれ、より強力なアプリとなります。不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。

また、ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。

はじめてのプログレッシブ ウェブアプリ | Web Fundamentals - Google Developers

実際、エンジニアが居ない技術的に疎い企業では、とりあえず今の時代はネイティブアプリが必要なんでしょみたいな考えを持っている人も少なくないと思う。

たしかにネイティブアプリは速度やら機能の点ではWebアプリより快適なUXを提供出来るかもしれない。 それでも開発コストや運用コストを考えると、適材適所としか言いようが無い部分も多い。

そういう意味では、Progressive Web Appsはこのすっぽり抜けていた穴を埋める存在になるのかなと思う。

この記事では、Progressive Web Appsが登場するとユーザ体験はどのようにかわるのか、さらにエンジニアとして、Progressive Web Appsを実装する上で利用される周辺技術(Service WorkerとかWeb App Manifest)について整理しておきたい。

ユーザから見たProgressive Web Apps

Progressive Web Appsは、pre cacheやlazy loadなど、速度的なパッシブな強みに加えて、バナー表示やプッシュ通知など、いくつかアクティブな機能もある。

ここでは、Progressive Web Appsがユーザ体験をどのように変えるのかを考えてみる。

オフラインでの閲覧

Service Workerを使うことで、オンラインの間に最新の情報を取得し、オフラインになった場合でも、最後に取得した情報を使うことで閲覧が可能になる。

インターネットが普及したとはいえ、地方などにはまだ十分に移動体通信環境が整っていないということを痛感する場面は少なくない。

ネイティブアプリはオンライン・オフライン問わずに使えるものがほとんどだけど、Progressive Web Appsでも同様に、インターネット環境に左右されない利用が可能になる。

キャッシュを用いた高速表示

Service Workerでコンポーネントをpre cacheすることで、複数画面に渡る利用をスムーズに行えるようになる。 これまでのWebサイトは、画面遷移時に都度、必要なリソースを読み込んでいたけど、Progressive Web Appsでは事前に必要なものを読み込んでおくことで、 快適なブラウジングができるようになる。

ホーム画面にバナーを追加

アプリをインストールするように、Webサイトをホーム画面にアイコンとして追加できる。 これは普通のWebサイトでもできるけど、後述するWeb App Manifestによってネイティブアプリに近い快適な動作をするようになる。

manifest.json でWebアプリを「ホーム画面に追加」自動バナー表示に対応させる - Qiita

プッシュ通知

情報が更新された際などに、プッシュ通知を受けることができる。 これもアプリと同様で、必要なときにだけアクセスするための手段、受動的に情報を受け取ることができるようになる。

Progressive Web Appを作ってみる #Push Message編 - Qiita

Progressive Web Appsに使われる技術

技術的な面では、html5experts.jpの以下の記事がわかりやすい。

PWAppsとは、最新のWeb技術を有効に活用し、漸進的(Progressive)に高度なユーザー体験を提供しようとする概念です。このPWAppsの概念を具体化する一つの手法として、「PRPL」(パープル)と名付けられた開発・提供パターンが提案されました。

Googleが新たに提唱するProgressive Web Appsの新たな開発パターン「PRPL」とは? | HTML5Experts.jp

HTTP/2 Server Push

Web ComponentsのCustom Elementsの考えに則すと、HTMLをコンポーネント化して親となるHTMLから呼び出すという方式になる。 これは非常に理にかなった考えだと思うけど、HTTP/1.1ではコンポーネントの読み込みに転送待ちが発生してしまう。

Progressive Web Appsでは、このコンポーネントリソースを、HTTP/2のServer Pushを使うことで待ち時間を効率化してダウンロードさせる。

HTTP/2 Server Pushはサーバ側で制御が可能なので、これまでのHTMLをダウンロードしてから再度クライアントからリクエストを飛ばす、といった手順も短縮でき、リクエストされたHTMLに応じてクライアントからのリクエストを受けずにPushできる。

Service Worker

Webページ上で動くJSとは違い、Service Workerはバックグラウンド実行される。 ページを開いていなくても動かせるため、オフライン動作やプッシュ通知などの実装のために使う。

Service Workerは必要なときに起動し、終了するので、殆どの場合、IndexedDB等のローカルストレージと合わせて使うことになる。

Web App Manifest

ネイティブアプリに近いUIやアクセス方法を提供するために、Web App Manifestを使う。 これによって、情報を読み込むまでに表示される基本色や、アプリタイトル、アイコンなどが指定できる。

Web App Manifest

用意したmanifest.jsonは、HTML上からlinkタグを使って指定する必要がある。

<link rel="manifest" href="manifest.json">

スマートフォンで「ホーム画面に追加」したサイトがWeb App Manifestの対応をしていた場合、 UIがWeb App Manifestに指定したとおりに行われる。 定義については以下のページがわかりやすい。

Web App Manifest | MDN

Chromeのデモページも用意されてる。 このページを「ホーム画面に追加」し、ホーム画面からタップするとWeb App Manifestのはたらきが理解しやすい。

Web Application Manifest Sample

今のうちに触っておくべき

公式でも丁寧なチュートリアルが用意されている上に、完成したコードも提供されている。

はじめてのプログレッシブ ウェブアプリ | Web Fundamentals - Google Developers

さらにすでに作ってみた人も多く、モバイルファーストの現代、Progressive Web Appsは重要なポジションになってくると思う。

Progressive Web Appを作ってみる - Qiita

今のうちに全体像を掴んで、すぐに実装できるようにしておきたいところ。 実際に作ってみたらまた別記事を書きます。