service-worker | Casual Developers Note

create-react-appで作ったアプリのService Workerを無効化する方法

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が明示的に無効化されました。