一些初步考虑：

"react": "^16.8.2",
"react-scripts": "2.1.5"

我创建了一个新的反应应用程序，我需要实现推送通知。 下列的this https://developers.google.com/web/fundamentals/codelabs/push-notifications/在教程中，我能够在 5 分钟内启动并运行，但现在我必须在 React 应用程序中实施相同的策略（有点）。

我面临的问题是我能够订阅通知 API，但我不知道如何编辑service-worker.js文件添加一个事件监听器来捕获push event (Handle a Push Event谷歌指南中的章节）

使用 Create React App 自定义您的 Service Worker 是可能的，但可能相当困难且棘手。

CRA 使用 Workbox 开箱即用生成软件 https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#generatesw_plugin_1要生成的 webpack 插件service-worker.js文件，并且您不能向其中注入任何代码（您could https://medium.com/founding-ithaka/implementing-push-notifications-with-create-react-app-bf35cd25d870使用 CRA@1，自 CRA@2 起不再使用）

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

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

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

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

• in 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 提供了一个mock https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432 for service-worker.js

• in public/文件夹，创建custom-service-worker.js文件。 Webpack 会复制它as is in the build/ folder

Pros：快速、肮脏的胜利

Cons：您的自定义文件未使用 Webpack 处理（无导入），并且您必须自己实现网络缓存逻辑（假设您需要 PWA），因为您绕过了 Workbox 插件

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

有一个模块：cra-追加-sw https://github.com/bbhlondon/cra-append-sw。 您负责提供附加的代码。

Pros：设置简单，利用GenerateSW的优势

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

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

• 应用解决方案#1 的前 2 个步骤：更改src/index.js and src/serviceWorker.js

• in src/文件夹，创建custom-service-worker.js文件。它将由 Webpack 处理，因此您可以使用 ES2016/TypeScript 语法并导入模块

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

• install 反应应用程序重新接线 https://github.com/timarney/react-app-rewired:

  • npm add --save-dev react-app-rewired
  • in package.json, in "scripts"， 代替react-scripts with 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
  }
  }
  

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

Cons：复杂且脆弱，因为多重配置 hack。

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

反应应用程序重新接线工作箱 https://github.com/davejm/react-app-rewire-workbox可能有助于简化 Webpack 配置（主应用程序的配置）。有待测试。