【React】PWA対応のアプリを作成する

<!-- ============================================== -->
#概要
<!-- ============================================== -->
ここでは、React（create-react-app）で作成したWebアプリを GitHub にアップロードして、スマホやPCでインストールできるようにPWA化します。

###PWA とは
PWA（Progressive Web Apps）とは、ざっくり言うとネイティブアプリのように扱えるWEBアプリです。

個人的には、開発の自由度が上がることがPWAの一番のメリットかなって思います。

とくにスマホアプリは、リリースするのにストア登録などのお金と、プロファイルの用意やメールのやり取りなどの時間が必要で、開発に専念したいのにそこが億劫でならないです。また、iOS、Androidでソースコードを共有できるのも大きく、開発も好きなプラットフォームでできるのでストレスがなくなります。

>開発の自由度
アプリストアを通す必要がないということは、AppleやGoogleのガイドラインに縛られる必要がないということです。審査を通す必要がないので、開発の自由度も高まりますし、準備ができればすぐに公開することができます。
>
>また、開発者の観点からすると、プラットフォームごとにアプリを開発する必要がないという点も魅力的です。1つのPWAを構築するだけで、デバイス問わずに一貫した内容を表示することができます。

[PWA（Progressive Web Apps）とは？メリットと実装事例について](https://digital-marketing.jp/seo/what-is-progressive-web-apps/)

デメリットとしては、PWAはキャッシュ容量とローカルストレージ容量の上限が決まっているということです。

<!-- ============================================== -->
#環境
<!-- ============================================== -->
* Windows10
* VSCode

<!-- ============================================== -->
#構築
<!-- ============================================== -->
npm（パッケージマネージャー）を使用するので、前提として [Node.js](https://nodejs.org/ja/) をインストールします。

###プロジェクトの作成
任意のプロジェクトフォルダを作成します。VSCodeで開いてターミナルから以下を実行します。
[Making a Progressive Web App](https://create-react-app.dev/docs/making-a-progressive-web-app/)

```:TypeScript
npx create-react-app . --template cra-template-pwa-typescript
```
※ JavaScriptだと以下（使う機会はほぼないと思いますが）

```:JavaScript
npx create-react-app . --template cra-template-pwa
```

###ServiceWorkerの有効化
作成されたプロジェクトのファイルを以下のように変更します。

```tsx:src/index.tsx
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
// serviceWorkerRegistration.unregister(); ← ここを
serviceWorkerRegistration.register();   // ← こう
```

###GitHubの設定
GitHubにデプロイするための設定をします。

**1） インストール**
ターミナルから以下をインストールします。

```
npm i gh-pages
```

**2） プロジェクトを GitHub にアップロード**
いくつかやり方がありますが、VSCodeなら以下のやり方で、GitHubと連携させてアップロードすることができます。
[VSCodeでGit・GitHubを使う方法を解説する【2021最新】](https://miya-system-works.com/blog/detail/128)

**3） package.jsonの設定**
以下を追加します。

```.config:package.json
"name": "pwa_test2",
"version": "0.1.0",
"private": true,
"homepage": "https://nemutas.github.io/pwa_test2/", // 追加 - 1
・・・
"scripts": {
	"start": "react-scripts start",
	"build": "react-scripts build",
	"test": "react-scripts test",
	"eject": "react-scripts eject",
	"deploy": "npm run build && gh-pages -d build" // 追加 - 2
}
```

`追加-1`は、[GitHub](https://github.com/) のリポジトリの以下から確認します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358498/54c58d3a-0c97-0daa-f0a3-3e0936e8cb6b.png)

###ビルド
ターミナルで以下を実行して、ビルドとGitHub Pagesへのプッシュを行います。

```
npm run deploy
```

<!-- ============================================== -->
#確認
<!-- ============================================== -->

###PCでのインストール
`追加-1`で設定したアドレスにアクセスすると、ビルドしたアプリが開きます。
Chromeの場合、アドレスバーの右側にインストールボタンが表示されています。こちらを押すと、PCのローカル環境にインストールされます。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358498/484390d4-3ea6-9b5e-c163-c257ec474e60.png)

アンインストールは、インストールされたアプリの設定から行えます。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358498/a4cb5ff0-9471-219b-e19d-20208aa95f34.png)

###iPhoneでのインストール
iPhoneの場合、Safariからサイトにアクセスし、`ホーム画面に追加`ができればOK
![IMG_2237.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358498/606c0680-01c3-e8d0-b43f-cf0e18534b8b.png)

###Android機種は持ってないのでわからないです

<!-- ============================================== -->
#次にやること
<!-- ============================================== -->
**create-react-app**でプロジェクトを作成すると、ServiceWorker はすでに設定されているので簡単にPWA化することができました。
ServiceWorkerの細かい仕様や、キャッシュ容量、ストレージ容量がどのように蓄積されるか、そのへんを調べるともっと理解が深まると思いました。