SPA（Single Page Application）

• 単一ページによるWebアプリケーション。
• 返された結果をクライアント側でリアルタイムにレンダリングできるようになった。
• 瞬時に画面を書き換えることができる。（いいね！ボタンとか）
• 画面遷移はDOM操作。
• ページのリフレッシュは不要。
• リッチなエクスペリエンス。
• クライアントとサーバーのロジックを分けて、保守性を上げることができる。（分業）

PWA（Progressive Web Apps）

• ネイティブアプリのようなUXを提供するWebアプリの概念。
• デバイスに合わせた機能提供がWebコンテンツ自体で行われている。

～これまでのWebになかった機能～

Service Worker
* オフラインサポート（Cache API）
* プッシュ通知（Push API）
* バックグラウンド処理（Background API）

Web Application Manifest
* アイコンの追加

～PWAのメリット～

• ブラウザUIなしで起動できてオフラインでも使える。
• アプリを公開するためにストアに提出する必要がない。
• プラットフォームごとに修正する必要がない。
• インストールしなくても使える。
• サーバー側から通知をプッシュできる。（タイムセールの開始など）
• オフラインでの使用が可能なため、ネットワークの状態に左右されないように作れる。
• 低機能なブラウザやPWA非サポートのデバイスにもサービスを提供できる。
• ユーザの強い権限で動作しない。
• HTTPS接続でしか動作しないのでサーバーとのやり取りを安全に行える。
• ハイパーリンクがあればサービスに接続できる。
  *各メリットを状況に合わせて取捨選択できる。

Service Worker

（バックグラウンドで動作するプログラミング可能なネットワークプロキシ）
* PWAを実現する上で中心となる機能。
* Webページのネットワークリクエスト全てをインターセプトできる。
* キャッシュ
* リクエストのハンドリング
* Push
* バックグラウンド同期

Web Application Manifest

（ホーム画面のアイコンやアプリ起動時のウィンドウの状態を指定）
* ホーム画面に追加するアイコン、スプラッシュ、背景色、ウィンドウスタイルを定義するもの。

まとめ

• SPAは物理的なページ遷移を行わずWebクライアント上で画面が描画されるものでリアクティブな動作が可能。
• PWAはWebクライアントの機能に合わせて、Webアプリにネイティブアプリライクな機能を実装したものでデバイスへのインストールやPush通知が可能。