React + Service worker - Offline support

index.js

import { createRoot } from 'react-dom/client';
import * as serviceWorker from './service-worker';


const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, world</h1>);
serviceWorker.register();

service-worker.js

export function register(config) {
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {
     const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
     registerValidSW(swUrl, config);
   });
 }
}

self.addEventListener('fetch', function (event) {
 event.respondWith(
   caches.match(event.request).then(function (response) {
     return response || fetch(event.request);
   })
 );
});

function registerValidSW(swUrl, config) {
 navigator.serviceWorker
   .register(swUrl, { scope: '/' })
   .then((registration) => {
     registration.onupdatefound = () => {
       const installingWorker = registration.installing;
       if (installingWorker == null) {
         return;
       }
       installingWorker.onstatechange = () => {
         if (installingWorker.state === 'installed') {
           if (navigator.serviceWorker.controller) {
             if (config && config.onUpdate) {
               config.onUpdate(registration);
             }
           } else {
             console.log('Content is cached for offline use.');
             if (config && config.onSuccess) {
               config.onSuccess(registration);
             }
           }
         }
       };
     };
   })
   .catch((error) => {
     console.error('Error during service worker registration:', error);
   });
}

export function unregister() {
 if ('serviceWorker' in navigator) {
   navigator.serviceWorker.ready
     .then((registration) => {
       registration.unregister();
     })
     .catch((error) => {
       console.error(error.message);
     });
 }
}