既存の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化する場合も基本は変わりません。

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

所感

上記の方法で、ReactアプリのPWA化をすることができます。
サービスワーカーの処理を考えないといけないのかなと考えていましたが、実際はテンプレートが既に存在するため実装するのには難しくはなかったと思います。
今後はPWAアプリを生かすための処理や機能を覚えていく必要がありそうです。


コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA