create-react-appはデフォルトでPWAのためのService Workerに対応しています。しかし、PWAを考慮しないで作っているアプリの場合、Service Workerが原因で思わぬ不具合に見舞われることがあります。今回は、明示的にService Worckerを無効化する方法を紹介します。
はじめに
昨年create-react-appにService Workerがマージされ、デフォルトになりました。PWA(Progressive Web Apps)にガッツリ対応するならそのままでよいですが、今まで通りに開発したい場合は、Service Workerを無効化しないとトラブルの元です。例えば、HerokuにService Workerを有効にしたままPushして、後でService Workerのスクリプトを削除してPushしたとしても、Heroku内のキャッシュによってService Workerが動き続ける問題が知られています。
そんな問題に悩まされないように、PWAに対応しないプロジェクト向けに、Service Worckerの無効化方法を紹介します。
Service Workerの無効化方法①スクリプトの削除
まずは最も一般的な方法です。最初からPWAに対応しない場合はこの方法を取ります。
「registerServiceWorker.js」を削除
create-react-appで自動生成された「registerServiceWorker.js」を削除します。
$ create-react-app my-app
$ cd my-app
$ ls src/
App.css App.test.js index.js registerServiceWorker.js
App.js index.css logo.svg
$ rm src/registerServiceWorker.js
$ ls src/
App.css App.js App.test.js index.css index.js logo.svg
index.jsからregisterServiceWorkerを削除
わかりやすくコメントアウトします。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// registerServiceWorker();
これで、Service Workerが無効化されました。
Service Workerの無効化方法②明示的に無効化
次に、明示的に指定する方法です。これは、途中までService Workerを有効なまま開発をしており、途中からPWAに対応しない方針を決めた時などに、キャッシュの影響を受けないように無効化する方法です。
index.jsでunregisterを呼び出す
unregisterを呼び出すように書き直します。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { unregister } from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
unregister();
これで、Service Workerが明示的に無効化されました。
最後に
いかがでしたか？create-react-appを使う際に、PWAを導入しないのであれば、必ずService Workerは無効化しておきましょう。では。
環境
- create-react-app: 1.5.2
