メインコンテンツへスキップ
バージョン: v8

React でのプログレッシブウェブアプリ

Vite を使用して React アプリを PWA にする​

PWA の 2 つの主な要件は、Service Worker と Web Application Manifest です。これら両方をアプリに手動で追加することもできますが、代わりに Vite PWA Plugin を使用することをお勧めします。

まず、vite-plugin-pwa パッケージをインストールします

npm install -D vite-plugin-pwa

次に、vite.config.js または vite.config.ts ファイルを更新し、vite-plugin-pwa を追加します

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [react(), VitePWA({ registerType: 'autoUpdate' })],
});

この最小限の構成により、アプリケーションはビルド時に Web アプリケーションマニフェストと Service Worker を生成できます。

Vite PWA プラグインの設定の詳細については、Vite PWA 「はじめに」ガイドを参照してください。

PWA のデプロイ方法については、Vite PWA 「デプロイ」ガイドを参照してください。

Create React App で React アプリを PWA にする​

注

Ionic CLI v7 以降、Ionic React スターターアプリは Create React App の代わりに Vite とともにリリースされます。Vite の手順については、Vite を使用した React アプリの PWA 化を参照してください。

PWA の 2 つの主な要件は、Service Worker と Web Application Manifest です。これら両方をアプリに手動で追加することもできますが、Create React App (CRA) と Ionic CLI の基本プロジェクトは、これをすでに提供しています。

アプリの index.ts には、serviceWorker.unregister() 関数への呼び出しがあります。CRA が提供するベースには、サービスワーカーがオプトイン機能としてあるため、有効にする必要があります。有効にするには、serviceWorker.register() を呼び出します。

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 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();

このパッケージが追加されたら、ionic build を実行すると、build ディレクトリが PWA としてデプロイする準備が整います。

注

デフォルトでは、React アプリパッケージには、アプリのアイコンとして Ionic ロゴが付属しています。マニフェストを更新して正しいアプリ名を使用し、アイコンも置き換えるようにしてください。

注

Service Worker や多くの JavaScript API (ジオロケーションなど) のような機能では、アプリを安全なコンテキストでホストする必要があります。ホスティングサービスを通じてアプリをデプロイする場合は、サービスワーカーを最大限に活用するために HTTPS が必要になることに注意してください。

Service Worker の設定​

デフォルトでは、CRA/React Scripts には、Workbox の Webpack プラグイン に基づいた事前構成済みの Service Worker 設定が付属しています。これはキャッシュファースト戦略を利用しており、ネットワークが新しいバージョンのアプリを返した場合でも、アプリがキャッシュから読み込まれることを意味します。

CRA/React Scripts の性質上、この設定は React Scripts の内部にあるため、React Scripts からイジェクトしない限りカスタマイズできません。現在、Ionic CLI はイジェクトされた React アプリをサポートしていないため、このアクションを実行する場合は、Ionic CLI の代わりに npm/yarn スクリプトを使用する必要があります。

デプロイ​

Firebase​

Firebase ホスティングは、CDN による高速な応答時間、デフォルトで有効になっている HTTPS、HTTP2 プッシュのサポートなど、プログレッシブウェブアプリに多くの利点を提供します。

まず、まだ利用できない場合は、Firebase で プロジェクトを作成します。

次に、ターミナルで Firebase CLI をインストールします

npm install -g firebase-tools
注

firebase-tools を初めて使用する場合は、firebase login コマンドで Google アカウントにログインします。

Firebase CLI をインストールしたら、Ionic プロジェクト内で firebase init を実行します。CLI がプロンプトを表示します

「このフォルダーに設定する Firebase CLI 機能は何ですか?」「Hosting: Firebase Hosting のファイルを構成し、(オプションで) GitHub アクションデプロイを設定します」を選択します。

新しい Firebase プロジェクトを作成するか、既存のプロジェクトを選択します。

「このディレクトリのデフォルトの Firebase プロジェクトを選択してください:」Firebase Web サイトで作成したプロジェクトを選択します。

「パブリックディレクトリとして使用するものは何ですか?」「build」と入力します。

注

次の質問に答えると、アプリでルーティング、ハードリロード、ディープリンクが機能するようになります

「シングルページアプリとして構成します (すべての URL を /index.html に書き換えます)?」「はい」と入力します。

「ファイル build/index.html はすでに存在します。上書きしますか?」「いいえ」と入力します。

Github で自動ビルドとデプロイを設定しますか?「はい」と入力します。

どの GitHub リポジトリで Github ワークフローを設定しますか?プロジェクト名を入力します。

デプロイするたびにビルドスクリプトを実行するようにワークフローを設定しますか?「はい」と入力します。

デプロイするたびに実行するスクリプトは何ですか?npm ci && npm run build と入力します。

PR がマージされたときにサイトのライブチャネルへの自動デプロイを設定しますか?「はい」と入力します。

サイトのライブチャネルに関連付けられたフックされたブランチの名前は何ですか?プロジェクトのメインブランチ名を入力します。

アプリをデプロイ用に構成する firebase.json 設定ファイルが生成されます。

最後に必要なのは、キャッシュヘッダーが正しく設定されていることを確認することです。これを行うには、headers スニペットを firebase.json ファイルに追加します。完全な firebase.json は次のようになります

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      }
    ]
  }
}

firebase.json プロパティの詳細については、Firebase ドキュメントを参照してください。

次に、次を実行してアプリの最適化されたバージョンをビルドします

ionic build --prod

最後に、次を実行してアプリをデプロイします

firebase deploy

これが完了すると、アプリがライブになります。

目次

このページを編集する