ninjinkun's diary

ninjinkunの日記

create-react-appのService Workerサポートで手軽にオフラインキャッシュを使う

この記事はPWA Advent Calendar 21日目の記事です。

create-react-appService Workerサポートを使ってお手軽にオフラインキャッシュを組み込んでみたので、調べたことをメモします。とりあえずすぐにオフラインでPWAが動かせるようになって便利です。

使い方

create-react-app でアプリを生成していればindex.js|ts

import { register } from './serviceWorker';

register();

するだけ。

内部

  • create-react-app(2.0以上の場合、現在は2.1.4)のService Worker supportは内部でworkbox-webpack-pluginを使っている
    • 使われているのはgenerateSW モード
    • プロジェクト内のhtml/js/imageが一通りキャッシュされる設定になっている
    • カスタマイズはreact-app-rewireとか使わないとできない?かも。未検証

挙動

以下はcreate-react-appというよりはworkboxの挙動だと思われる

  • 新しくページを開くと前回pre-cacheされたindex.htmlやjsがロードされる
  • デプロイして更新があった場合はバックグラウンドでpre-cacheされる(tempに入る)
    • 該当ページを開いているタブを全部閉じてから開き直すと、tempに入っていた更新が有効になる
    • ページを開きっぱなしでスーパーリロードしても更新が反映されないので注意(はまる)
      • これサーバーのAPIと合わせて更新する必要がある時とかどうするんだ?
      • アップデートは検知できるから、「タブを全部閉じて開き直してください」みたいなプロンプトを出すのか
      • ドキュメントによれば、これは遅延ロードによるレースコンディションを防ぐためらしい
      • (推測)恐らくServiceWorkerのキャッシュは全てのタブプロセスで共通なので、同じアプリの古いアセットをロードしたのタブが残っている状態で新しいキャッシュを有効にしてしまうと、古いアセットで動いているページが新しいキャッシュを読み込んで壊れるから、ということだと思う

temp領域に入っているアセットはApplicationタブから確認できます。 f:id:ninjinkun:20181221175931p:plain

参考

使いだすと、たぶん以下を熟読することになると思います。

こちらも参考になりました。 qiita.com