create-react-appコマンドを実行すると、React.jsプロジェクトの雛形を作れます。
その雛形のsrcディレクトリ以下にregisterServiceWorker.jsというファイルがあります。
また、ビルドするとservice-worker.jsというファイルが生成がされます。
雛形のコードがService Worker上でしている事と、上記ファイルについてまとめてみました。
Service Workerについて
Service Workerとは、リッチなオフライン体験・定期的なバックグラウンド同期・プッシュ通知など、いわゆるPWAの機能を実現するために基盤となる技術です。
（詳しくはGoogleのドキュメントにて解説されています。Service Worker の紹介）
Service Workerによって実現できる機能は様々ですが、create-react-appで作った雛形にはキャッシュの機能があらかじめ実装されています。
この機能によって、作ったReact.jsプロジェクトの静的ファイル（HTML、JavaScript、CSS、画像ファイル等）をブラウザ側のCache Storageという場所にキャッシュしてくれるようになります。
キャッシュされた静的ファイルとService Workerの組み合わせによって、次のことを実現することができます。
- 訪問時にキャッシュしたファイルを利用して、ページが高速に読み込まれるように
- ネットワークがオフライン状態になってても、キャッシュしたファイルを利用して動作するように
- アップデートされたファイルは、バックグラウンドでダウンロードしキャッシュされるように
- 基本的にキャッシュされたファイルを利用するようになるため、通信量を抑えることができる
registerServiceWorker.jsについて
このファイルは閲覧しているブラウザにService Worker上で動くスクリプトを登録するスクリプトです。
Service Worker上で動くスクリプトというのはservice-worker.jsを指します。
この中にはService Workerの登録に関する処理があらかじめ書かれています。
registerServiceWorker.jsはsrc/index.jsから呼び出されており、以下コードで実行されています。
import registerServiceWorker from './registerServiceWorker';
/* 中略 */
registerServiceWorker();
Service Workerが登録される条件
Service Workerを閲覧しているブラウザに登録するためには、いくつかの条件があります。（該当コード）
- 本番環境（process.env.NODE_ENVがproduction）であること
- 開発中、ローカルで変更した内容がキャッシュによって確認し辛くなる事を防ぐため、本番のみ有効となっています
- ブラウザ側がService Workerに対応していること
- 現在、全てのブラウザでサポートされていません。
- ブラウザ側の対応状況についてはこちらで確認することができます。
service-worker.jsについて
registerServiceWorker.jsはあくまでもService Workerに登録するだけのスクリプトで、Service Worker上で動いているのはservice-worker.jsになります。
このファイルはsw-precache-webpack-pluginのライブラリによってビルド時に生成されるスクリプトです。
中には静的ファイルをキャッシュする処理やキャッシュの管理、キャッシュしたファイルを利用する処理などが書かれています。
Service Workerを無効にする方法
作成するWEBアプリケーションの内容次第ではService Workerのメリットが薄かったり、邪魔になる場合があります。
無効にする場合はsrc/index.jsにかかれているregisterServiceWorker()の記述を削除します。
これにより、新しくService Workerが登録されることがなくなります。
また、１度でも本番環境でService Workerを有効にした場合は、既に登録されているService Workerを削除してあげる必要があります。
src/index.jsを以下のように変更します。
import { unregister } from './registerServiceWorker';
/* 中略 */
unregister();
これでユーザーが再訪問したタイミングでService Workerが削除されます。
ただし、service-worker.jsは、キャッシュを無効にするまでに最大24時間かかる場合があります。