本文へスキップ

プログレッシブウェブアプリの作成

本番ビルドには、一流のプログレッシブウェブアプリを生成するために必要なすべてのツールが含まれていますが、**オフライン/キャッシュ優先の動作はオプトインのみです**。

Create React App 4以降、プロジェクトに`src/service-worker.js`ファイルを追加して、Workboxの`InjectManifest`プラグインの組み込みサポートを使用できます。これにより、サービスワーカーがコンパイルされ、プリキャッシュするURLのリストが注入されます。コンパイルされたサービスワーカーには、プリキャッシュするURLのリストが注入されます。

PWAのカスタムテンプレートのいずれかを使用して新しいプロジェクトを開始すると、オフラインファーストのサービスワーカーの出発点として役立つ`src/service-worker.js`ファイルが作成されます。

npx create-react-app my-app --template cra-template-pwa

TypeScriptの同等のコードは次のとおりです。

npx create-react-app my-app --template cra-template-pwa-typescript

サービスワーカーを使用しない場合、またはサービスワーカーの作成に別の方法を使用する場合は、`src/service-worker.js`ファイルを作成しないでください。その場合、`InjectManifest`プラグインは実行されません。

ローカルの`src/service-worker.js`ファイルを作成することに加えて、使用前に登録する必要があります。オフラインファーストの動作をオプトインするには、開発者は、`src/index.js`ファイルで次の内容を確認する必要があります。

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

コメントにあるように、`serviceWorker.unregister()`を`serviceWorker.register()`に変更すると、サービスワーカーの使用がオプトインされます。

オプトインの理由​

オフラインファーストのプログレッシブウェブアプリは、従来のウェブページよりも高速で信頼性が高く、魅力的なモバイルエクスペリエンスを提供します。

  • `webpack`ビルドの一部であるすべての静的サイトアセットはキャッシュされるため、ネットワーク接続（2Gや3Gなど）に関係なく、次回の訪問時にページが高速に読み込まれます。更新はバックグラウンドでダウンロードされます。
  • オフラインの場合でも、ネットワークの状態に関係なくアプリが動作します。つまり、ユーザーは1万フィート上空や地下鉄の中でもアプリを使用できます。
  • モバイルデバイスでは、アプリをユーザーのホーム画面に直接追加できます（アプリアイコン付き）。これにより、アプリストアの必要がなくなります。

ただし、デプロイのデバッグをより困難にする可能性があります。

`workbox-webpack-plugin`は本番環境の構成に統合されており、すべての`webpack`生成アセットを自動的にプリキャッシュし、更新をデプロイする際に最新の状態に保つサービスワーカーファイルをコンパイルします。サービスワーカーは、HTMLのナビゲーションリクエストを含む、`webpack`生成アセットのすべてのリクエストに対してキャッシュファースト戦略を使用するため、低速または不安定なネットワークでも、ウェブアプリは常に高速になります。

注：ローカルの`public/`ディレクトリからコピーされた静的ファイルやサードパーティのリソースなど、`webpack`によって生成されないリソースは、プリキャッシュされません。必要に応じて、Workboxのルートを設定して、選択したランタイムキャッシング戦略をそれらのリソースに適用できます。

カスタマイズ​

Create React App 4以降、独自の`src/service-worker.js`ファイルを作成するか、`cra-template-pwa`（または`cra-template-pwa-typescript`）テンプレートによって追加されたファイルのカスタマイズを行うことで、このサービスワーカーのロジックを完全に制御できます。Workboxプロジェクトの追加モジュールを使用したり、プッシュ通知ライブラリを追加したり、デフォルトのキャッシングロジックの一部を削除したりできます。唯一の要件は、`self.__WB_MANIFEST`をファイルのどこかに入れておくことです。Workboxコンパイルプラグインは、プリキャッシュするURLのマニフェストを生成する際にこの値をチェックします。プリキャッシングを使用しない場合は、次のように無視される変数に`self.__WB_MANIFEST`を代入できます。

// eslint-disable-next-line no-restricted-globals
const ignored = self.__WB_MANIFEST;

// Your custom service worker code goes here.

オフラインファーストに関する考慮事項​

サービスワーカーの登録をオプトインする場合は、次の点を考慮してください。

  1. 最初のキャッシングが完了した後、サービスワーカーのライフサイクルによって、更新されたコンテンツがユーザーに表示されるタイミングが制御されます。遅延ロードされたコンテンツとの競合状態を回避するために、デフォルトの動作は、更新されたサービスワーカーを「待機中」状態に保守的に維持することです。これは、ユーザーは既存の開いているタブを閉じるまで（リロードだけでは不十分です）、古いコンテンツが表示されることを意味します。この動作の詳細については、このブログ投稿を参照してください。

  2. ユーザーは、オフラインファーストのウェブアプリに必ずしも精通しているわけではありません。ユーザーに通知することは役立ちます。サービスワーカーがキャッシュの入力を完了したとき（「このウェブアプリはオフラインでも動作します！」というメッセージを表示）、およびサービスワーカーが次回ページを読み込んだときに使用できる最新の更新を取得したとき（「既存のタブを閉じると、新しいコンテンツが使用可能になります。」というメッセージを表示）に通知します。これらのメッセージの表示は現在、開発者への課題として残されていますが、出発点として、`src/serviceWorkerRegistration.js`に含まれるロジックを利用できます。これは、各シナリオを検出するためにどのサービスワーカーのライフサイクルイベントをリッスンするかを示しており、デフォルトでは、適切なメッセージをJavaScriptコンソールにログ出力するだけです。

  3. サービスワーカーはHTTPSを必要としますが、ローカルテストを容易にするために、そのポリシーは`localhost`には適用されません。本番ウェブサーバーがHTTPSをサポートしていない場合、サービスワーカーの登録は失敗しますが、ウェブアプリの残りの部分は機能したままになります。

  4. サービスワーカーは、本番環境（例：`npm run build`の出力）でのみ有効になります。開発環境ではオフラインファーストのサービスワーカーを有効にしないことをお勧めします。これにより、以前にキャッシュされたアセットが使用され、ローカルで加えた最新の変更が含まれていない場合に、フラストレーションが生じる可能性があります。

  5. ローカルでオフラインファーストのサービスワーカーをテストする必要がある場合は、アプリケーションを（`npm run build`を使用して）ビルドし、ビルドディレクトリから標準のhttpサーバーを実行します。ビルドスクリプトを実行した後、`create-react-app`は本番ビルドをローカルでテストする1つの方法に関する手順を表示し、デプロイ手順には他の方法を使用するための手順があります。*ブラウザのキャッシュによる問題を回避するために、必ずシークレットウィンドウを使用してください。*

  6. デフォルトでは、生成されたサービスワーカーファイルは、異なるドメインからロードされたHTTP APIリクエスト、画像、または埋め込みなど、クロスオリジンのトラフィックをインターセプトまたはキャッシュしません。Create React App 4以降、これは上記のようにカスタマイズできます。

プログレッシブウェブアプリのメタデータ​

デフォルトの設定には、public/manifest.json にあるウェブアプリマニフェストが含まれており、ウェブアプリケーション固有の詳細情報をカスタマイズできます。

Android の Chrome や Firefox を使用してユーザーがホーム画面にウェブアプリを追加する場合、manifest.json のメタデータによって、ウェブアプリが表示される際のアイコン、名前、ブランドカラーが決まります。ウェブアプリマニフェストガイド は、各フィールドの意味と、カスタマイズがユーザーエクスペリエンスにどのように影響するかについて、より詳細な情報を提供しています。

ホーム画面に追加されたProgressive Web App は、アクティブなサービスワーカーがある場合、より高速にロードされ、オフラインでも動作します。ただし、サービスワーカーの登録をオプトインするかどうかとは関係なく、ウェブアプリマニフェストのメタデータは引き続き使用されます。