既存のReactプロジェクトをPWA化した

まず初めに既存のアプリをPWA化を説明する前に新規で作成した場合を見てみましょう。

新規にReactでPWAでアプリを作ることを決めていた場合なら、以下のコードを実行すればPWA化できるプロジェクトが作成できます。
「cra-template-pwa-typescript」コマンドを使用することでPWA+TypeScriptのウェブアプリテンプレートが取得できます。

コマンド

npx create-react-app [プロジェクト名] --template cra-template-pwa-typescript

作成したアプリのソースコード内で「service-worker.ts」と「serviceWorkerRegistration.ts」がサービスワーカを動かすためのコードが含まれています。
後は、「index.tsx」のコードを以下のように変更すればアプリのPWA化が完了します

コマンド

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

// 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.register(); ←このコードがアプリをPWA化してくれます。

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

既存アプリのPWA化

上記では新規にアプリを作成した場合のPWA化についてでした。
既存のアプリをPWA化する場合も基本は変わりません。

「service-worker.ts」と「serviceWorkerRegistration.ts」ファイルの取得
「serviceWorkerRegistration.ts」が必要になります。二つのファイルを取得するために適当なプロジェクトを作成し、「service-worker.ts」と「serviceWorkerRegistration.ts」ファイルを既存プロジェクトのsrc直下にコピーし配置します。
パッケージの登録
新規に作ったプロジェクトと既存のプロジェクトのpackage.jsonファイルを比較して、「workbox-」で始まるパッケージをコピーして既存プロジェクトに貼り付けます。
「npm」または「yarn」でパッケージを再ビルドを行います。
最後に「index.tsx」のコードに新規作成で記載したコードと同じように、「serviceWorkerRegistration.register();」を追加します。