在浏览器中出现错误 - 无法为范围注册 ServiceWorker

Posted 2023-02-21

【中文标题】在浏览器中出现错误 - 无法为范围注册 ServiceWorker

【英文标题】：Getting error in browser - Failed to register a ServiceWorker for scope

【发布时间】：2021-09-11 16:12:17

【问题描述】：

我正在尝试使用 msw 来运行带有模拟数据的 React 应用程序。下面是我的 index.js；

import React from 'react';
import * as serviceWorker from './serviceWorker';

if (process.env.NODE_ENV === 'development') 
  const  worker  = require('./mocks/browser')
  worker.start().then(() => renderApp())

我的 service worker js 位于 public/mockServiceWorker.js

我的 src/mocks/browser.js 如下；

import  setupWorker  from 'msw'
import  handlers  from './handlers'
// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers)

我的 src/mocks/index.js 如下；

if (typeof window === "undefined") 
  const  server  = require("mocks/server");

  server.listen();
 else 
  const  worker  = require("mocks/browser");

  worker.start();

现在在浏览器中运行应用程序时，我看到以下错误；

Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/mockServiceWorker.js'): The script has an unsupported MIME type ('text/html').

我也有点困惑，因为我看到在 src 下创建了一个额外的 serviceWorker.js（这似乎是通过 create-react-app 生成的），正如你在上面看到的，这也是在 src/index.js 中导入的。 js（再次通过 create-react-app），但我希望使用的是 public/mockServiceWorker.js

我不确定这些是否无关。我正在尝试以https://github.com/ghoshnirmalya/introduction-to-msw

为例

还有MSW官方页面供参考-https://mswjs.io/docs/getting-started/integrate/browser

【参考方案1】：

我假设您正在使用 Create React App (CRA)。 MSW documentation 表示您应该从 src/index.js 文件中删除以下行：

serviceWorker.unregister()

这是你做的吗？

CRA 模板已经带有一个 service worker，这就是为什么你有两个文件。

默认情况下禁用 CRA 服务工作线程（因此有 serviceWorker.unregister() 行）。通过删除 unregister 行，您将在生产环境中运行默认的 service worker。确保这是您想要的。

【讨论】：

谢谢...是的，该行已经取消注释（尽管我仍然有导入...import * as serviceWorker from './serviceWorker';）...另外，我想要来自 msw 的 service worker 将用于我的应用程序...再次，我的意图是使用模拟数据运行应用程序（这是 msw 库包含的内容）

好的，你试过用你自己的替换 CRA 服务工作者脚本吗？我知道 CRA 使用很多 Webpack 脚本来处理事情，而且涉及到 Service Worker 时非常不灵活。

您可以查看的另一件事是构建您的应用程序并检查输出文件夹以查看您的脚本是否正确捆绑。您可能需要弹出或使用React App Rewired。

谢谢...不知道 CRA 的服务人员与 MSW 建议的服务人员有什么区别....正如他们在此页面上所说的那样 (mswjs.io/docs/api/setup-worker/start) - 模拟服务Worker 分发负责请求拦截的 Service Worker javascript 模块（mockServiceWorker.js）

我对这个 Service Worker 有点陌生......所以很困惑如何在 React 应用程序中集成......我认为它应该是直截了当的，但看起来不像......跨度>