Create React App with Workbox でのプレキャッシュ

Service Worker を使用してアセットをキャッシュに保存すると、再訪問時の読み込み速度が向上し、オフライン サポートを提供できます。Workbox を使用すると、この処理を簡単に行うことができます。Workbox は、Create React App にデフォルトで含まれています。

Houssein Djirdeh

Workbox は、デフォルト構成で Create React App（CRA）に組み込まれており、ビルドごとにアプリケーション内のすべての静的アセットをプリキャッシュします。

Service Worker を使用したリクエスト / レスポンス

なぜこれが有用なのでしょうか。

サービス ワーカーを使用すると、重要なリソースをキャッシュに保存（プリキャッシュ）できるため、ユーザーがウェブページを 2 回目に読み込むときに、ブラウザはネットワークにリクエストを送信するのではなく、サービス ワーカーからリソースを取得できます。これにより、繰り返しアクセスしたときのページ読み込みが高速化されるだけでなく、ユーザーがオフラインのときにもコンテンツを表示できるようになります。

CRA の Workbox

Workbox は、サービス ワーカーを作成、管理するためのツールのコレクションです。CRA では、workbox-webpack-plugin はすでに本番環境ビルドに含まれており、ビルドごとに新しい Service Worker を登録するには、src/index.js ファイルで有効にするだけです。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();
serviceWorker.register();

このファイルで Service Worker が有効になっている、CRA で構築された React アプリの例を次に示します。

キャッシュに保存されているアセットを確認するには:

  • サイトをプレビューするには、[View App] を押します。次に、[Fullscreen] 全画面表示 を押します。
  • Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
  • [ネットワーク] タブをクリックします。
  • アプリを再読み込みします。

Size 列には、ペイロード サイズではなく、(from ServiceWorker) メッセージが表示されます。これは、これらのリソースが Service Worker から取得されたことを示しています。

Service Worker を使用したネットワーク リクエスト

Service Worker がすべての静的アセットをキャッシュするため、オフラインでアプリケーションを使用してみます。

  1. DevTools の [Network] タブで、[Offline] チェックボックスをオンにして、オフライン エクスペリエンスをシミュレートします。
  2. アプリを再読み込みします。

ネットワーク接続がなくても、アプリケーションはまったく同じように動作します。

キャッシュ戦略の変更

CRA で Workbox が使用するデフォルトのプリキャッシュ戦略は、キャッシュ ファーストです。すべての静的アセットが Service Worker キャッシュから取得され、失敗した場合（リソースがキャッシュされていない場合など）は、ネットワーク リクエストが行われます。これにより、ユーザーが完全にオフラインの状態でも、コンテンツをユーザーに提供できます。

Workbox では、静的リソースと動的リソースのキャッシュ保存にさまざまな戦略とアプローチを定義できますが、CRA のデフォルト構成は、完全にイジェクトしない限り変更または上書きできません。ただし、外部 workbox.config.js ファイルのサポートを追加することを検討するオープンな提案があります。これにより、デベロッパーは 1 つの workbox.config.js ファイルを作成するだけで、デフォルト設定をオーバーライドできます。

キャッシュ ファースト戦略の処理

最初に Service Worker キャッシュに依存し、次にネットワークにフォールバックすることは、次回アクセスしたときに読み込みが速く、ある程度オフラインで動作するサイトを構築する優れた方法です。ただし、次の点を考慮する必要があります。

  • Service Worker によるキャッシュ動作をテストするにはどうすればよいですか？
  • キャッシュに保存されたコンテンツを表示していることをユーザーに知らせるメッセージを表示する必要があるか。

CRA のドキュメントでは、これらの点について詳しく説明しています。

まとめ

サービス ワーカーを使用してアプリケーション内の重要なリソースをプリキャッシュすることで、ユーザーに高速なエクスペリエンスを提供し、オフライン サポートも提供します。

  1. CRA を使用している場合は、src/index.js で事前構成済みのサービス ワーカーを有効にします。
  2. CRA を使用して React アプリケーションをビルドしていない場合は、Workbox が提供する多くのライブラリ（workbox-webpack-plugin など）のいずれかをビルドプロセスに含めます。
  3. CRA が workbox.config.js オーバーライド ファイルをサポートするタイミングについては、こちらの GitHub の問題をご覧ください。