在reactjs中使用PWA

Question

请问如何在Reactjs中使用PWA？ 我在CRA（Creat-React-App）中使用IM，我说我已经有一个/src/RegisterServiceWorker.js，但是我不知道它是否是用于构建PWA的正确文件。

这是RegisterServiceWorker.js

const isLocalhost = Boolean(
 window.location.hostname === 'localhost' ||
   // [::1] is the IPv6 localhost address.
   window.location.hostname === '[::1]' ||
   // 127.0.0.1/8 is considered localhost for IPv4.
   window.location.hostname.match(
     /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
   )
);

export default function register() {
 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);
   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/facebookincubator/create-react-app/issues/2374
     return;
   }

   window.addEventListener('load', () => {
     const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

     if (isLocalhost) {
       // This is running on localhost. Lets check if a service worker still exists or not.
       checkValidServiceWorker(swUrl);
     } else {
       // Is not local host. Just register service worker
       registerValidSW(swUrl);
     }
   });
 }
}

function registerValidSW(swUrl) {
 navigator.serviceWorker
   .register(swUrl)
   .then(registration => {
     registration.onupdatefound = () => {
       const installingWorker = registration.installing;
       installingWorker.onstatechange = () => {
         if (installingWorker.state === 'installed') {
           if (navigator.serviceWorker.controller) {
             // At this point, the old content will have been purged and
             // the fresh content will have been added to the cache.
             // It's the perfect time to display a "New content is
             // available; please refresh." message in your web app.
             console.log('New content is available; please refresh.');
           } else {
             // At this point, everything has been precached.
             // It's the perfect time to display a
             // "Content is cached for offline use." message.
             console.log('Content is cached for offline use.');
           }
         }
       };
     };
   })
   .catch(error => {
     console.error('Error during service worker registration:', error);
   });
}

function checkValidServiceWorker(swUrl) {
 // Check if the service worker can be found. If it can't reload the page.
 fetch(swUrl)
   .then(response => {
     // Ensure service worker exists, and that we really are getting a JS file.
     if (
       response.status === 404 ||
       response.headers.get('content-type').indexOf('javascript') === -1
     ) {
       // No service worker found. Probably a different app. Reload the page.
       navigator.serviceWorker.ready.then(registration => {
         registration.unregister().then(() => {
           window.location.reload();
         });
       });
     } else {
       // Service worker found. Proceed as normal.
       registerValidSW(swUrl);
     }
   })
   .catch(() => {
     console.log(
       'No internet connection found. App is running in offline mode.'
     );
   });
}

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

manifest.json：

{
  "short_name": "React App",
  "name": "Fatboar",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }, {
      "src": "logo192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "logo512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#2F3BA2",
  "background_color": "#3E4EB8"
}

根据一些tuto，我看到了应该添加到index.html的这段代码，但是我不确定：

 <script>

// fichier : /script.js

if ("serviceWorker" in navigator) {
  // On essaye d'enregistrer le service
  // worker
  navigator.serviceWorker
    .register("/service-worker.js")
    .then(registration => {
      // Le Service Worker a fini d'être
      // téléchargé.
      console.log(
        "App: Téléchargement fini."
      );

      // (1) A chaque fois qu'il y a une
      // mise à jour des Service Workers
      registration.addEventListener(
        "updatefound",
        () => {
          // (1) On récupère le Service
          // Worker en cours
          // d'installation
          const newWorker =
            registration.installing;
          // `registration` a aussi
          // les clés `active` et 
          // `waiting` qui permettent
          // de récupérer les Service
          // Workers correspondant

          // (2) A chaque fois que le
          // Service Worker en cours
          // d'installation change
          // de statut
          newWorker.addEventListener(
            "statechange",
            () => {
              // (2) On affiche son
              // nouveau statut
              console.log(
                "App: Nouvel état :",
                newWorker.state
              );
            }
          );
        }
      );
    })
    .catch(err => {
      // Il y a eu un problème
      console.error(
        "App: Crash de Service Worker",
        err
      );
    });
}
    </script>

谢谢