Service Worker でアセットをキャッシュに保存すると、再訪問のスピードが上がり、オフライン サポートを提供できます。Workbox を使えば簡単に作成できます。Workbox は、Create React App にデフォルトで含まれています。
Workbox の組み込み
デフォルト構成を使用して React アプリ（CRA）を作成し、
静的アセットを自動的に把握できます。
なぜこれが有用なのでしょうか。
Service Worker で重要なリソースをキャッシュに保存できる （プレキャッシュ）行う処理です。つまり、ユーザーがウェブページをもう一度読み込むと、 ブラウザは、サービス アカウントにリクエストを行う代わりに、Service Worker から 通信できます。その結果、再訪問の際にページの読み込み速度が向上し、 ユーザーがオフラインのときにもコンテンツを表示できるようになります。
CRA のワークボックス
Workbox は、サービスを作成して維持するためのツールのコレクション
できます。CRA では、
workbox-webpack-plugin
すでに製品版ビルドに含まれており、
新しい Service Worker を src/index.js ファイル内で
build:
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 を使用してビルドされ、このファイルを通じて Service Worker を有効にした React アプリの例を次に示します。
キャッシュに保存されているアセットを確認するには:
- サイトをプレビューするには、[アプリを表示] を押します。[
全画面表示
。 - Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
- [ネットワーク] タブをクリックします。
- アプリを再読み込みします。
Size 列には、ペイロード サイズではなく、
これらのリソースが取得されたことを示す (from ServiceWorker) メッセージ
Service Worker からの情報です。
Service Worker はすべての静的アセットをキャッシュに保存するため、 オフライン時:
- DevTools の [Network] タブで、[Offline] チェックボックスを有効にして、 オフライン エクスペリエンスをシミュレートできます。
- アプリを再読み込みします。
ネットワークがなくても、アプリケーションはまったく同じように動作します あります。
キャッシュ戦略の変更
CRA の Workbox で使用されるデフォルトのプレキャッシュ戦略は「キャッシュ ファースト」です。 すべての静的アセットが Service Worker のキャッシュから取得され、 （たとえば、リソースがキャッシュされていない場合など）は、ネットワーク リクエストが行われます。この ユーザーがたとえ完了していない場合でも オフライン状態になります。
Workbox はさまざまな戦略やアプローチの定義をサポートしますが、
静的リソースと動的リソースのキャッシュ保存では、CRA のデフォルト構成では
完全に排除しない限り、変更または上書きされません。ただし、
オープン プロポーザル
外部 workbox.config.js ファイルのサポートの追加方法を確認してください。この
デベロッパーは、デフォルトの設定をオーバーライドするために、
単一の workbox.config.js ファイル。
キャッシュ ファースト戦略の処理
まず Service Worker のキャッシュを利用してからネットワークにフォールバック 2 回目以降の読み込みが速いサイトを構築するのに最適な方法です。 ある程度オフラインで作業できますただし、いくつかの点に注意する必要があります。 考慮する必要があります
- Service Worker によるキャッシュ動作をテストするには、どうすればよいですか。
- 閲覧していることを示すメッセージを表示すべきか キャッシュされたコンテンツか？
CRA ドキュメント 詳しく解説しています。
まとめ
Service Worker を使用して、アプリケーション内の重要なリソースを オフライン サポートだけでなく、ユーザーにより高速なエクスペリエンスを提供できます。
- CRA を使用している場合は、事前構成済みの Service Worker を
src/index.js。 - React アプリケーションを構築するために CRA を使用しない場合は、
Workbox が提供する多くのライブラリ（
workbox-webpack-pluginなど）を ビルドプロセスです。 - CRA が
workbox.config.jsオーバーライド ファイルをサポートするタイミングに注意してください。 GitHub の問題。