React

[React] React SPAのキャッシュがやたらと効く

現象

React SPAを AWS S3 に置いて、
AWS CloudFront経由で配信していますが、

S3とCloudFront両方のキャッシュをOFFにしているにも関わらず、
更新後に ブラウザーのキャッシュを強制更新 しないと
画面が更新されない現象がありました。

原因

create-react-app で作ったプロジェクトは、
npm run build したものは PWA(Progressive Web App)にデフォルトで対応しているため、
Service Workerが有効 になります。

By default, the production build is a fully functional, offline-first Progressive Web App.

対策

src/index.js ファイルにある下記の関数を消すことで
PWAを対応しないようにします。

registerServiceWorker()

反省点

本記事を書く前に、
英語 「react service worker update」で再検索したら、
create-react-appで作ったアプリの更新がうまくいかない場合は、Service Workerが原因かもしれない
という記事でも纏められていました。

ググる時にはまず英語を使いましょう。

コメントを残す