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

Service Worker でアセットをキャッシュすると、再訪問のスピードが上がり、オフライン サポートを提供できます。Workbox はこれを簡単に行うことができ、デフォルトで Create React アプリに含まれています。

Houssein Djirdeh

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

Service Worker でのリクエスト/レスポンス

メリット

Service Worker を使用すると、重要なリソースをキャッシュに保存できます（プレキャッシュ）。これにより、ユーザーがウェブページを再度読み込んだときに、ブラウザはネットワークに対してリクエストを行う代わりに、Service Worker からリソースを取得できます。これにより、再アクセス時のページの読み込みが速くなり、ユーザーがオフラインのときでもコンテンツを表示できるようになります。

CRA のワークボックス

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

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

CRA を使用してビルドされた React アプリの例を以下に示します。このアプリでは、このファイルで Service Worker を有効にしています。

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

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

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

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

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

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

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

キャッシュ戦略の変更

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

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

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

次回以降のアクセスでの読み込みが速くなり、ある程度オフラインでも機能するサイトを構築するには、まず Service Worker のキャッシュを利用してからネットワークにフォールバックするのが優れた方法です。ただし、次の点を考慮する必要があります。

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

CRA のドキュメントには、これらのポイントなどの詳細が記載されています。

おわりに

Service Worker を使用してアプリケーション内の重要なリソースを事前キャッシュし、迅速なユーザー エクスペリエンスとオフライン サポートを実現します。

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