React 和 Typescript 中的 ServiceWorker答案

【问题标题】：ServiceWorker in React and TypescriptReact 和 Typescript 中的 ServiceWorker
【发布时间】：2021-06-17 21:33:59
【问题描述】：

在创建基于 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找到。

知道我做错了什么吗？

非常感谢任何提示，在此先感谢您！

【问题讨论】：

Typescript 不捆绑，你的捆绑器会，你在使用 webpack。？
啊，很高兴知道，我认为 ts 也可以作为捆绑程序工作 - 我想我还是可以的，因为该项目是使用 create-react-app 创建的

标签： javascript reactjs typescript progressive-web-apps service-worker

【解决方案1】：

好的，查看您使用 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。同样，在您的正常构建中保持寄存器位分开。

【讨论】：