Search code examples
reactjscreate-react-app

How to update pages when a service worker is registered from Create React App

I'm registering a service worker from create react app and I'm getting good scored in lighthouse for being a progressive web app and I can install the web app from the Chrome address bar, all is good

BUT when I update the content on the website nobody gets to see it unless they clear their cache, which they don't. How can I ensure they see the latest content while still getting a top score on lighthouse for being a progressive web app?

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { Router } from './router';
import './scss/index.scss';

ReactDOM.render(<Router />, document.getElementById('shell'));
serviceWorker.register();
Solution

  • To service worker update your cache, you'll need to close ALL TABs of your website. Another way is use this package to do this job.

    https://www.npmjs.com/package/@loopmode/cra-workbox-refresh

    It will do all the job for you, and after install the new files, it shows up a button allowing you to update the page