javascript - create-react-app 使用自定义 Service Worker 而不弹出

Question

我有一个现有的应用程序，我正在尝试将其转换为使用 React。我已经用一个全新的 create-react-app 复制了它的功能(使用 react-scripts 1.0.13)。

我想使用现有的 Service Worker。我注意到 CRA 创建了自己的 Service Worker； webpack 配置中的代码(使用 SWPrecacheWebpackPlugin)创建了一个未捆绑的模块，service-worker.js。所有其他 JS 模块都捆绑在一起。

据我了解，我不能只复制现有的服务工作线程 existing-service-worker.js 并尝试导入它，因为所有 JS 模块都捆绑在一起。

我不想弹出。

我 fork 了 create-react-app 来自定义 react-scripts 并在 webpack 配置中使用不同的逻辑，这将允许我使用现有的服务工作线程而不是使用 SWPrecacheWebpackPlugin 创建的服务工作线程...但是，我不知道如何执行此操作。这是我第一次使用 React 和 webpack。

有人可以为我指出正确的方向，并帮助我在 React 中使用现有的 Service Worker，而不需要弹出吗？

Answer 1

有一个专门为此用例构建的 npm 库。它叫cra-append-sw .

大部分详细信息都在 npm 页面中，但简单地说，您只需要安装该库(npm i --save cra-append-sw)。

对 package.json 进行一些更改:

"start": "react-scripts start && cra-append-sw --mode dev ./public/custom-sw-import.js",
"build": "react-scripts build && cra-append-sw --skip-compile ./public/custom-sw-import.js" 

最后在您的公共(public)文件夹中创建一个名为 custom-sw-import.js 的文件，您在其中编写的所有服务工作人员代码都将简单地附加到 cra 的服务工作人员中。

我可以验证这是否有效，因为我应用了相同的原理来制作我的网站 www.futurist-invenzium.com它演示了 PWA 提供的所有功能。

如果您想要更多信息，我还发现这篇博文很有帮助 in depth answer .