使用 Create React App 自定义您的 Service Worker 是可能的，但可能非常困难和 hacky。

开箱即用，CRA 使用 Workbox GenerateSW webpack 插件生成service-worker.js文件，并且您不能向其中注入任何代码（您可以使用 CRA@1，因为 CRA@2 之后不再使用）

您有多种策略，我将从最简单的一种开始。

解决方案 1：提供您自己的 service-worker 文件

• 在src/index.js启用服务工作者：

  // serviceWorker.unregister()
  serviceWorker.register()
  

• 在src/serviceWorker.js注册您的自定义文件：

  // if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
  if ('serviceWorker' in navigator) {
  

  // const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
  const swUrl = `${process.env.PUBLIC_URL}/custom-service-worker.js`;
  

  你必须运行开发服务器时更改名称的原因，CRA提供了一个 模拟的service-worker.js

• 在public/文件夹中，创建custom-service-worker.js文件。的WebPack会复制它的是中build/文件夹

优点：快速，肮脏的胜利

缺点：你的自定义文件没有用 Webpack 处理（没有导入），你必须自己实现网络缓存逻辑（假设你想要一个 PWA），因为你绕过了 Workbox 插件

解决方案 2：将您的代码附加到生成的 service-worker

有一个module：cra-append-sw。您负责提供附加的代码。

优点：易于设置，利用 GenerateSW

缺点：附加的代码使用 Babel/Webpack 处理，但不使用 CRA 的配置（您可以选择退出）。仍然使用为您处理网络缓存的 GenerateSW。不确定它在本地开发时是否有效

解决方案 3：在自定义 service-worker 文件中使用 Workbox

• 应用解决方案#1 的前两个步骤：改变src/index.js和src/serviceWorker.js

• 在src/文件夹中，创建custom-service-worker.js文件。它会被 Webpack 处理，所以你可以使用 ES2016/TypeScript 语法和导入module

  /* eslint no-restricted-globals: "off" */
  import * as precaching from 'workbox-precaching'
  // your own imports
  
  if (self.__precacheManifest) {
  precaching.precacheAndRoute(self.__precacheManifest)
  }
  
  // your own code
  

• 安装react-app-rewire：

  • npm add --save-dev react-app-rewired
  • 在package.json，在"scripts"，替换react-scripts为react-app-rewired

• 调整 webpack 配置：config-overrides.js在根文件夹中创建：

  const WebpackBeforeBuildPlugin = require('before-build-webpack')
  const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
  const path = require('path')
  const merge = require('lodash.merge')
  const fs = require('fs')
  
  // from https://www.viget.com/articles/run-multiple-webpack-configs-sequentially/
  class WaitPlugin extends WebpackBeforeBuildPlugin {
  constructor(file, interval = 100, timeout = 60e3) {
   super(function(stats, callback) {
     const start = Date.now()
  
     function poll() {
       if (fs.existsSync(file)) {
         callback()
       } else if (Date.now() - start > timeout) {
         throw Error(`Couldn't access ${file} within ${timeout}s`)
       } else {
         setTimeout(poll, interval)
       }
     }
     poll()
   })
  }
  }
  
  const swOutputName = 'custom-service-worker.js'
  const workerSource = path.resolve(__dirname, 'src', swOutputName)
  
  module.exports = {
  webpack: (config, env) => {
   // we need 2 webpack configurations:
   // 1- for the service worker file.
   //    it needs to be processed by webpack (to include 3rd party modules), and the output must be a
   //    plain, single file, not injected in the HTML page
   const swConfig = merge({}, config, {
     name: 'service worker',
     entry: workerSource,
     output: {
       filename: swOutputName
     },
     optimization: {
       splitChunks: false,
       runtimeChunk: false
     }
   })
   delete swConfig.plugins
  
   // 2- for the main application.
   //    we'll reuse configuration from create-react-app, without a specific Workbox configuration,
   //    so it could inject workbox-precache module and the computed manifest into the BUILT service-worker.js file.
   //    this require to WAIT for the first configuration to be finished
   if (env === 'production') {
     const builtWorkerPath = path.resolve(config.output.path, swOutputName)
     config.name = 'main-application'
     config.plugins.push(
       new WorkboxWebpackPlugin.InjectManifest({
         swSrc: builtWorkerPath,
         swDest: swOutputName
       }),
       new WaitPlugin(builtWorkerPath)
     )
   }
  
   // remove Workbox service-worker.js generator
   const removed = config.plugins.findIndex(
     ({ constructor: { name } }) => name === 'GenerateSW'
   )
   if (removed !== -1) {
     config.plugins.splice(removed, 1)
   } 
  
   const result = [swConfig, config]
   // compatibility hack for CRA's build script to support multiple configurations
   // https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/build.js#L119
   result.output = { publicPath: config.output.publicPath }
   return result
  }
  }
  

优点：您可以在 service-worker 文件中使用 ES2016/TypeScript 代码。您仍然可以从 Workbox 网络缓存设施中受益，并对其进行完全控制

缺点：复杂且脆弱，因为有多个配置 hack。

我使用了最后一个解决方案，因为我需要从 Workbox 缓存代码和import在我的服务工作者文件中缓存一些代码。

react-app- rewire - workbox 可能有助于简化 Webpack 配置（主应用程序的配置）。待测试。

Create React App 4 - 2020 年 10 月发布

从 Create React App 4 开始，您可以通过创建自己的 src/service-worker.js 文件或自定义由 cra-template-pwa（或 cra-template -pwa-typescript) 模板。您可以使用 Workbox 项目中的其他module、添加推送通知库或删除一些默认缓存逻辑。

https://create-react-app.dev/docs/making-a-progressive-web-app/#customization