投稿日 2020/12/05

create-react-app と ServiceWokerで PWA を実装する

ReactswServiceWoker

create-react-app には、ServiceWoker を実装できるよう、workbox-webpack-plugin が含まれています。

このおかげで、create-react-app から作ったアプリケーションでは、特に他のツールをインストールすることなく ServiceWoker が作れます。

最初から ServiceWoker を導入予定なら、service-worker.js とその他のモックを作ってくれるテンプレートを使用するのが速いです。

テンプレートは使用せず、あとから追加したくなったときは、自分で service-worker.js 的なファイルを追加すればよいです。

公式ではここに PWA を使いたいときのテンプレート指定の方法があります。ここを読み込めばだいたいわかる感じ。

Making a Progressive Web App

前提条件

  • create-react-app4 以降
  • 本番 Web サーバーが HTTPS をサポートしていること

create-react-app の ServiceWoker を設定する

以下のコマンドで、create-react-app と workbox-webpack-plugin の統合環境が作れます。

JavaScript のとき

npx create-react-app my-app --template cra-template-pwa

TypeScript のとき

npx create-react-app my-app --template cra-template-pwa-typescript

焼きあがったら、カスタマイズ用のsrc/service-worker.jsが出来ていることを確認してください。

ServiceWoker を登録する

ServiceWoker は、登録するまでアクティブにはなりません。登録しないと使えないので（ServiceWoker のライフサイクルはこちら）次の作業をします。

serviceWorker がどう動いてるのかな？と思って見ていたら、唐突にnavigatorとか出てきてなんだこれって思ってしまいました。

Navigator.serviceWorker

下のコードでは、ブラウザーがサービスワーカーに対応しているかをチェックしているところ。

src\serviceWorkerRegistration.js 
…
export function register(config) {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { ←ここ
    // The URL constructor is available in all browsers that support SW.
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
    if (publicUrl.origin !== window.location.origin) {
      // Our service worker won't work if PUBLIC_URL is on a different origin
      // from what our page is served on. This might happen if a CDN is used to
      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
      return;
    }
…

前は src に serviceWorker.js なかったっけ？

以前 create-react-app から作ったデフォルトには、serviceWorker.js あったような？と思って調べてみました。

git から辿ると、デフォルトでは含まれなくなったらしいです。

Remove server worker registration from default templates #9349

参考