Hackingのはむです。2019年のゴールデンウィーク10連休、いかがお過ごしでしょうか?Reactアプリケーションを作成するためのの定番ボイラープレートcreate-react-app。先日、v3.0.0にメジャーアップデートされ、まさに安定のツールとなりました。本記事ではこのcreate-react-appが生成するserviceWorker.jsというファイルが何者なのか、そして、このモジュールを使って実行しているコードが何をやってくれているのかについてご紹介したいなと思います。本記事で実際に用いたcreate-react-appのバージョンは以下の通りです。3.0.0では、上記バージョンのcreate-react-appを使用していつものようにReactアプリを作成してみます。アプリケーションの名前は、ちょっと長いですが、what-is-the-role-of-service-workerという名前にします。hacking!では、アプリケーションが作成できたらcdで移動します。what-is-the-role-of-service-worker次に、src/index.jsをエディターで開きます。今回注目するべき対象は、5行目のserviceWorkerというimport対象のモジュール、そして、そのモジュールを用いて、src/index.jsの最終行でserviceWorker.unregister()を実行している部分になります。実は、ここでやっていることは非常にシンプルで、serviceWorkerというモジュールにunregister()という関数を実行させています。英語で解釈すると文字通りの意味になるわけですが、要するに、「解除する」を実行しています。Application)のキャッシングという機能を有効化、あるいは無効化することができるのですが、create-react-appがデフォルトで出力するコードでは、serviceWorker.unregister()というコードにより、キャッシュを無効化しています。https://bit.ly/CRA-PWAという注釈がありますが、前提として、PWAという機能の中に、オフラインという機能があって、ネットワークに接続できないような環境下でもコンテンツをキャッシュすることがうまく利用することでページ遷移を実現できるんですが、これには、ここのserviceWorker.unregister()という部分をunregister()からregister()に変更してね!ってちゃんと書かれています。本記事を掲載しているブログサイトでもserviceWorkerは健在で(但し、serviceWorker.jsというファイル名ではなく、sw.jsというファイル名になります。)、オフラインでもサイト内のコンテンツであればキャッシュによってページ遷移ができるんです。このキャッシュをデフォルトで有効にしてくれているGatsbyJSって凄いなぁと実感します。参照あれ!と書かれていますが、このリンクには実はあまり詳細なことは書かれていません。Workerの紹介が良い記事なので一度読んでおくと良いかと思います。いうわけで今回はcreate-react-appが使用するserviceWorkerというモジュール、そしてそのモジュールが有するPWAの一機能であるcacheの有効/無効を制御するコードのご紹介でした。Qrunch.netサーバー提供フィードバックを送信する。