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

标签 javascript reactjs webpack service-worker

我有一个现有的应用程序,我正在尝试将其转换为使用 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,而不需要弹出吗?

最佳答案

有一个专门为此用例构建的 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 .

关于javascript - create-react-app 使用自定义 Service Worker 而不弹出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46523468/

相关文章:

javascript - 将 Javascript 计数器格式化为 00 :26

javascript - 如果将项目放入数组并排序,则确定项目的潜在索引。

javascript - 试图在 react 中的文本之间添加 br 标签

javascript - 无法使用 Vue 打包库加载 CSS 文件(npm)

vue.js - npm runserve 和 npm run build 的不同 vue.config.js

javascript - 为什么我的 3d 立方体没有按预期旋转?

javascript - 从 Servlet 到 Jquery 的数组的数组

javascript - ReactJS - 停止按钮 onClick 从 <input> 获取焦点

reactjs - 为什么我得到 “useContext is not a function”或 “context is not defined”?

webpack - 仅使用标志运行 Webpack 插件