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

Question

我决定尝试使用 workbox，但我看到的所有指南都讨论了与 React 制作的 Service Worker 集成。

但是当我安装 CRA 时，我不再获得为我定制的 Service Worker。我需要做什么才能在这里集成工作箱？

这是我当前的代码：

应用程序.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'))
      }
    }

那么这就是公共文件中的 Service Worker

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-appv4 将在构建时检查文件是否存在，src/service-worker.js如果找到，则运行插件workbox-webpack-plugin，将该文件作为参数传递。InjectManifestswSrc

create-react-app如果您正在开始一个新项目并遵循“制作渐进式 Web 应用程序”指南中的说明（即运行）npx create-react-app my-app --template cra-template-pwa，您最终会将所有内容都放在正确的位置。

这就是说您的项目将：

• 自动捆绑代码src/service-worker.js（将 ES 模块导入转换为可以在 Service Worker 内部运行的代码）
• self.__WB_MANIFEST在您的 中查找该符号src/service-worker.js，并将其替换为预缓存清单，其中包含有关所有webpack资源的 URL 和修订信息，以便 Workbox 可以预缓存它们。

如果您对预缓存资产不感兴趣webpack，那么您根本不需要使用该InjectManifest插件，您可以将所需的任何代码放入名为以外的任何 src/service-worker.js文件中，并将该文件注册为您的服务工作人员。这取决于你。

如果您对 Workbox 的预缓存感兴趣，但您是从旧版本升级create-react-app并且没有“正确”src/service-worker.js文件，则可以手动将文件从模板复制到项目中。