Javascript 注册ServiceWorker失败：脚本具有不受支持的MIME类型-reactjs

我想将firebase添加到我的项目中。 但我得到了这个错误信息：

FirebaseError {code: "messaging/failed-serviceworker-registration", message: "Messaging: We are unable to register the default s…). (messaging/failed-serviceworker-registration).", browserErrorMessage: "Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').", stack: "FirebaseError: Messaging: We are unable to registe…es/@firebase/messaging/dist/index.cjs.js:1951:32)"}
browserErrorMessage: "Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html')."
code: "messaging/failed-serviceworker-registration"
message: "Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html'). (messaging/failed-serviceworker-registration)."
stack: "FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html'). (messaging/failed-serviceworker-registration).↵    at eval (webpack-internal:///./node_modules/@firebase/messaging/dist/index.cjs.js:1951:32)"
__proto__: Error

解决方案： 我必须将

firebase messaging sw.js

文件放在

public

目录中

但是在reactjs上，我们没有一个

public

目录

---

如果您使用的是

react样板文件

：

我补充说：

new OfflinePlugin({
  relativePaths: false,
  publicPath: '/',
  appShell: '/',
  ServiceWorker: {
    events: true,
    entry: path.join(process.cwd(), 'app/firebase-messaging-sw.js') //<-- path for your extended service worker
  },

  // No need to cache .htaccess. See http://mxs.is/googmp,
  // this is applied before any match in `caches` section
  excludes: ['.htaccess'],

两个文件位于同一目录（应用程序）。 如果你遇到同样的错误

然后：

---

我使用的是react boiler plate，它没有公用文件夹，我们必须将firebase-messaging-sw.js放在其中。在反应炉板中，我们必须输入此代码

new OfflinePlugin({
relativePaths: false,
publicPath: '/',
appShell: '/',
ServiceWorker: {
    events: true,
    entry: path.join(process.cwd(), 'app/firebase-messaging-sw.js') //<-- path for your extended service worker
},

---

现在应该可以了：）

我已经研究了无数个小时来解决这个问题，非常感谢！当使用Angular 7时，可能的解决方案是什么？我需要更多细节来在react.js中执行推送通知

app.js
`import 'file-loader?name=firebase-messaging-sw.js!./firebase-messaging-sw.js';`

new OfflinePlugin({
relativePaths: false,
publicPath: '/',
appShell: '/',
ServiceWorker: {
    events: true,
    entry: path.join(process.cwd(), 'app/firebase-messaging-sw.js') //<-- path for your extended service worker
},

// firebase messaging
import 'file-loader?name=firebase-messaging-sw.js!./firebase-messaging-sw.js';