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

Question

我想将 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目录。

Answer 1

如果您正在使用react boilerplate：

我是这样添加的：

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'],

我有一个push-notification.js，我应该firebase-messaging-sw.js在里面调用：

  navigator.serviceWorker
    .register('./firebase-messaging-sw.js')
    .then((registration) => {
      firebase.messaging().useServiceWorker(registration);
    });

两个文件是同一个目录（app）。如果你得到同样的错误，

然后：

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