React 和 Typescript 中的 ServiceWorker

如何解决React 和 Typescript 中的 ServiceWorker

在创建基于 javascript 的 React 项目时，安装 Service Worker 只需将 index.jsx 上的 serviceWorker.unregister() 更改为 serviceWorker.register()。

具有这样的项目结构：

- src
   |- index.jsx
   |- serviceWorker.js

此代码构建完成后，/build 文件夹将如下所示：

- build
   |- static
   |   |- css
   |   |- js
   |   |- media
   |
   |- index.html
   |- service-worker.js

这会正常工作，并且会导致 Service Worker 被正确注册。

---

另一方面，当在 Typescript 中设置项目时，给定相同的项目结构（其中 js / jsx 文件改为 ts / tsx） ，/build 看起来类似：

- build
   |- static
   |   |- js
   |       |- bundled-js.chunk.js
   |       |- bundled-js2.chunk.js
   |       |- ..
   |
   |- index.html

所以似乎 Typescript 构建了 serviceWorker，将它与所有其他 js 文件捆绑在一起。

这将导致 Service Worker 未被注册，并在控制台中出现以下错误：

Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('https://example.com/') with script ('https://example.com/service-worker.js'): The script has an unsupported MIME type ('text/html').

可以看到有错误的直播站点here；开源代码可以在here找到。

知道我做错了什么吗？

非常感谢任何提示，提前感谢您！

解决方法

好的，看看你使用 Create React App 的代码。这使用了 webpack，这就是捆绑，与 Typescript 无关，Javascript 被捆绑时也会发生同样的情况。

问题是覆盖 webpack 配置并不容易，有 CRACO -> https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#webpack-api

但即便如此还是有点棘手！！您需要告诉 webpack 不要捆绑 service-worker.js，另外我会从 server-worker 中取出寄存器位，因为它可以捆绑并希望包含在您的捆绑包中。

最简单的选择可能是直接使用 Typescript 单独编译 webworker。同样，在您的正常构建中保持寄存器位分开。