【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）とは？メリットと実装事例について

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

#環境

• Windows10
• VSCode

#構築

npm（パッケージマネージャー）を使用するので、前提として Node.js をインストールします。

###プロジェクトの作成
任意のプロジェクトフォルダを作成します。VSCodeで開いてターミナルから以下を実行します。
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の有効化
作成されたプロジェクトのファイルを以下のように変更します。

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最新】

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

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 のリポジトリの以下から確認します。

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

npm run deploy

#確認

###PCでのインストール
追加-1で設定したアドレスにアクセスすると、ビルドしたアプリが開きます。
Chromeの場合、アドレスバーの右側にインストールボタンが表示されています。こちらを押すと、PCのローカル環境にインストールされます。

アンインストールは、インストールされたアプリの設定から行えます。

###iPhoneでのインストール
iPhoneの場合、Safariからサイトにアクセスし、ホーム画面に追加ができればOK

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

#次にやること

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