Progressive Web Apps Roadshow Tokyo 2017 に参加してきた

1. What is Progressive Web Apps (PWA)

そもそも, Progressive Web Apps (以下, PWA) とは, ネイティブアプリに近いユーザー体験を与える Web アプリケーションのことで以下のような特徴があるものとされています (はじめてのプログレッシブ ウェブアプリ).

段階的
プログレッシブ・エンハンスメントを基本理念としたアプリであるため, ブラウザに関係なく, すべてのユーザーに利用してもらえます
レスポンシブ
パソコンでもモバイルでもタブレットでも, 次世代の端末でも, あらゆるフォームファクタに適合します
ネットワーク接続に依存しない
Service Worker の活用により, オフラインでも, ネットワーク環境が良くない場所でも動作します
アプリ感覚
App Shell モデルに基づいて作られているため, アプリ感覚で操作できます
常に最新
Service Worker の更新プロセスにより, 常に最新の状態に保たれます
安全
覗き見やコンテンツの改ざんを防ぐため, HTTPS 経由で配信されます
発見しやすい
W3C のマニフェストと Service Worker の登録スコープにより, 「アプリケーション」として認識されつつ, 検索エンジンからも発見することができます
再エンゲージメント可能
プッシュ通知のような機能を通じで容易に再エンゲージメントを促すことができます
インストール可能
ユーザーが気に入ればアプリのリンクをホーム画面に残しておくことができ, アプリストアで探し回る必要はありません
リンク可能
URL を使って簡単に共有でき, 複雑なインストールの必要はありません

要件が多いので, もう少し的を絞ると,

Fast
3 sec 未満のページロード時間. Service Worker によるキャッシュ
Integrated
Web App Manifest による Add to Homescreen や Prompt to Install, Payment Request API など
Reliable
Service Worker によるキャッシュなど
Engaging
Web Push Notifications など

なかでも印象に残ったことは, Web Push Notifications の使いどころでした. Web Push Notifications を使うには以下の 3 つの条件が揃っていることが望ましいと言えます.

  • timely
  • precise
  • relevant

2. HTTPS

先ほどのセクションで紹介したように, PWA の特徴を実装するには, Service Worker の導入が不可欠です. そして, Service Worker は (localhost を除き) HTTPS のページでしか動作しません. さらに, ページを HTTPS にすることは以下の 3 つの要件を満たすためにも必要になります (また, HTTP/2 を利用するためにも, 事実上 HTTPS は不可欠になります).

  • Identity
  • Confidentiality
  • Integrity

HTTPS のページにアクセスさせるためには,

301 Moved Permanently ステータスコードを使う方法では, リダイレクトされるまでユーザーは暗号化されない接続をすることになるので, 悪意のあるサイトへ誘導するなど中間者攻撃の可能性があります.

一方で, Strict-Transport-Security: max-age=expireTime HTTP レスポンスヘッダを利用する方法では, ブラウザがその Web ページに初めて HTTPS 接続をしたときに, サーバーが Strict-Transport-Security ヘッダで応答すると, ブラウザはその情報を記録します. これによって Strict Transport Security の機能が有効になり, ブラウザがそのサイトへ HTTP 接続することはなくなり, 自動的に HTTPS 接続を試みるようになります.

Strict-Transport-Security ヘッダで指定された有効期限が経過すると, 自動的な HTTPS への変換は行われなくなり, HTTP で接続を試みるようになります.

つまり, Strict-Transport-Security ヘッダで指定された有効期限内で 2 回目以降, 自動的に HTTPS 接続をさせるためのヘッダで, 毎回リダイレクトする必要なく HTTPS の Web ページに誘導できます.

3. Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages (AMP) とは, モバイルでの Web サイト閲覧を高速化することを目的とするオープンソースプロジェクトや, そのための仕様やライブラリのことです. PWA との関係で言えば, PWA は主に Service Worker を利用して, 2 回目以降の閲覧においてユーザー体験を向上させることですが, 逆に AMP は初回の閲覧においてユーザー体験を向上させることにあります (Start fast, stay fast!).

AMP を構成する技術の特徴で言えば, HTML に AMP のためのタグを記述することにあります (AMP HTML)

<!DOCTYPE html>
<html ⚡>
  <head>
    <link rel="canonical" href="hello-world.html">
    ...
    <style amp-boilerplate>...</style>
    <script async src="https://cdn.ampproject.org/v0.js"</script>
  </head>
  <body>
    <div>Hello World!</div>
    <amp-img src="hello.jpg" height="400" width="800"></amp-img>
  </body>
</html>

そして, AMP と PWA (Service Worker) を組み合わせる重要なタグが,

<amp-install-serviceworker>

また, 組み合わせ方にも以下の 3 つの方法があります.

  • AMP as PWA
  • AMP to PWA
  • AMP in PWA

AMP  by Example

4. Code Labs