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

【问题标题】：How to add workbox to React post update如何将工作箱添加到 React 更新后
【发布时间】：2020-12-22 04:46:00
【问题描述】：

我决定尝试使用 workbox，但我看到的所有指南都在谈论与 react 制作的 service worker 集成。

但是当我安装 CRA 时，我不再得到为我制作的服务人员。我需要做什么才能在此处集成工作箱？

这是我当前的代码：

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'))
      }
    }

那么这是公共文件中的服务工作者

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())
    }

  }
}

【问题讨论】：

标签： reactjs service-worker workbox workbox-webpack-plugin

【解决方案1】：

create-react-app v4 将在构建时check for the presence 的src/service-worker.js 文件，如果找到，运行workbox-webpack-plugin 的InjectManifest plugin，将该文件作为swSrc 参数传递。

如果您正在开始一个新项目并按照 create-react-app 的“Making a Progressive Web App”指南中的说明进行操作，即运行 npx create-react-app my-app --template cra-template-pwa，您最终会在正确的位置完成所有工作。

也就是说您的项目将：

自动bundlesrc/service-worker.js 中的代码（将 ES 模块导入转换为可以在 service worker 内部运行的代码）

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

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

【讨论】：