如何将工作箱添加到 React 更新后

Question

I have decided to try to use workbox but all of the guides i have seen talk about integrating with the service worker that react makes.

But when i install a CRA i no longer get the service worker made for me. What do i need to do to integrate workbox here?

This is my current code:

App.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import swDev from './swDev'
     
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
    
    swDev()

swDev.js

    export default function swDev(){
      let swURL = `${process.env.PUBLIC_URL}/sw.js`;
      if('serviceWorker' in navigator){
        navigator.serviceWorker.register(swURL).then(res => {
          console.log('Service worker has been registered');
        }).catch(err => console.log('Service worker was not registered'))
      }
    }

then this is the service worker in the public file

const cacheVersion = 'v1'


self.addEventListener('install', ()=>{
  console.log('Service worker has been installed');
})

self.addEventListener('activate', ()=>{
  console.log('Service worker is being activated');


})

self.addEventListener('fetch',(e)=>{

  e.respondWith(handleRequest(e.request))

  // function to update the cache
  // updateCache(e.request)

})


async function handleRequest(req){
  const cache = await caches.open(cacheVersion)
  const cacheRes = await cache.match(req)
  if(cacheRes){
    return cacheRes;
  }else{
    const netRes = await fetch(req);
    console.log(netRes);

    if(netRes.ok){
      return netRes;
    }else{
      // return an error message or something by matching it to a 404 page
      return netRes;
    }
  }
}

async function updateCache(req){

  if(navigator.onLine){
    const res = await fetch(req);
    const cache = await caches.open(cacheVersion);

    if(res.ok){
      // add the response to the caches and return the response
      await cache.put(req, res.clone())
    }

  }
}

Answer 1

create-react-app v4 will check for the presence of a src/service-worker.js file at build time, and if found, run workbox-webpack-plugin 's InjectManifest plugin , passing in that file as the swSrc parameter.

If you're starting a new project and follow the instruction from create-react-app 's "Making a Progressive Web App " guide, ie you run npx create-react-app my-app --template cra-template-pwa , you'll end up with everything in the right place.

Which is to say your project will:

• automatically bundle the code in src/service-worker.js (transforming the ES module imports into code that can be run inside the service worker)
• look for the symbol self.__WB_MANIFEST somewhere inside your src/service-worker.js , and replace it with a precache manifest , consisting of URLs and revision info about all your webpack assets, so that Workbox can precache them.

If you're not interested in precaching your webpack assets, then you don't need to use the InjectManifest plugin at all, and you can just put whatever code you want in a file named anything other than src/service-worker.js , and register that file as your service worker. That's up to you.

If you are interested in Workbox's precaching, but you're upgrading from an older create-react-app and you don't have a "correct" src/service-worker.js file, you can manually copy the file from the template into your project.