PWAとは何かまとめる

# 概要
PWAを実装する上で必要となる基礎的な知識についてまとめました。
PWAについては他のブログや記事にもたくさんまとまっていると思うので、分かりづらい等あればそちらを見るのが良いかと思います。
また、何か間違っている等あればご指摘いただければと思います。

# PWAとは
Progressive Web Appsの略で、ネイティブアプリのように提供可能なWebアプリのこと。
[Googleのデベロッパーページ](https://developers.google.com/web/progressive-web-apps/)には以下の3つの特徴があると書かれています。

- Reliable
- Fast
- Engaging

## Reliable
ネットワークの状態に依存しないようにすることでユーザに信頼できるexperienceを届けます。
例えばService Worker(JavaScriptで書かれたバックグラウンドで動作するproxyのようなもの)という機能がキャッシュの保持を行うことで、オフライン環境でもコンテンツを取得することが可能になります。

## Fast
一度読み込んだものは高速に表示し、スムーズな描画とスクロールを可能にします。

## Engaging
ネイティブアプリのように使用でき、没入感のあるexperienceを届けます。
具体的にはアプリストアを使わずにホームスクリーンにインストールして使用することができたり、Push通知を受信することができます。

## まとめると
PWAは

- ネットワーク状態に依存せず
- 高速に表示でき
- ネイティブアプリのように使用できる

Webアプリのことです。
ただ上記のような特徴を持つといっても具体的にどういった機能やUXを提供できていればいいか、その要素はたくさんあります。
Googleのデベロッパーページに[PWAチェックリスト](https://developers.google.com/web/progressive-web-apps/checklist)がまとめられているので、困ったらここを見てみるのが良いかと思います。

# PWAを構成する技術
PWAを構成する重要な技術として主に以下の2つがあると思っています。

- Service Worker
- Web App Manifest

## Service Worker
先程も出てきましたが、[Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/)とはブラウザのバックグラウンドで動作するJavaScriptのProxyです。
このProxyが本当に色々な機能を提供してくれています。

## Service Workerが担う役割
代表的なものとして以下の3つがあります。

- キャッシュ
- プッシュ通知
- バックグラウンド同期

### キャッシュ
その名の通り静的ファイルやAPIレスポンスの結果などをキャッシュすることができます。
これによりオフラインでの利用や、表示の高速化を可能にします。

### プッシュ通知(Web Push)
こちらもその名の通りPCやスマートフォン上でWebアプリに対して通知を行うことができます。
細分化するとWeb Pushは[Push API](https://developer.mozilla.org/ja/docs/Web/API/Push_API)と[Notifications API](https://developer.mozilla.org/ja/docs/WebAPI/Using_Web_Notifications)によって実現されます。
Push APIはWebアプリがサーバから通知を受信するためのAPIで、Notifications APIは受信した通知をページ外部の画面に表示するAPIです。
ただし2019/09現在、Push APIやNotifications APIは利用できるブラウザが限られています。
詳しくは以下を参照してください。

- https://caniuse.com/#feat=push-api
- https://caniuse.com/#feat=notifications

参考

- [Web Push Notifications: Timely, Relevant, and Precise &nbsp;|&nbsp; Web Fundamentals
      &nbsp;|&nbsp; Google Developers](https://developers.google.com/web/fundamentals/push-notifications/)

### バックグラウンド同期
Service Workerがバックグラウンドでキャッシュを更新したり、オフライン時に送れなかったリクエストをオンラインになったタイミングでリクエストしたりすることができます。
これによってリクエストによる待ち時間を減らし、UXを損なわずにアプリを提供できます。
ただし2019/09現在、こちらも対応ブラウザは限られています。

- https://caniuse.com/#feat=background-sync

参考

- [Introducing Background Sync &nbsp;|&nbsp; Web
      &nbsp;|&nbsp; Google Developers](https://developers.google.com/web/updates/2015/12/background-sync)

## Service Workerを使うための前提条件
Service Workerを利用するためには以下の2つの条件を満たす必要があります。

- サポートしているブラウザを使うこと
- HTTPSを使うこと
  - ただしlocalhostであればHTTPでも利用できる

また、サポートしているブラウザかどうかは以下を参照すると分かります。
https://caniuse.com/#feat=serviceworkers

# Web App Manifest
これはWebアプリをPWAとしてPCやスマートフォンにインストール可能にするためのJSONファイルです。
通常`manifest.json`という名前で配置し、ブラウザから読み込ませます。
このManifestファイルには

- アプリ名
- ホームスクリーンのアイコン
- 起動時に読み込むページ
- 背景色
- 表示モード

などを設定します。

参考

- [The Web App Manifest &nbsp;|&nbsp; Web Fundamentals
      &nbsp;|&nbsp; Google Developers](https://developers.google.com/web/fundamentals/web-app-manifest/)
- [ウェブアプリマニフェスト | MDN](https://developer.mozilla.org/ja/docs/Web/Manifest)

# まとめ
PWAとそれを構成する技術について紹介しました。
これを踏まえてVue.jsでPWAを実装するフェーズを「[Vue.jsをPWA化してService WorkerにRuntime Cacheを実装、そして公開するまで - Qiita](https://qiita.com/kawakawaryuryu/items/dd6a1c048e830f2f36ef)」で紹介していますので、良かったらご覧ください。

# その他参考
- [Your First Progressive Web App](https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0)