无法注册ServiceWorker：脚本具有不受支持的MIME类型-reactjs

Question

我想将Firebase添加到我的项目中。 但我收到此错误消息：

pi = p1._replace(x = 78)

解决方案： 我必须将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目录中。

但是在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.js
`import 'file-loader?name=firebase-messaging-sw.js!./firebase-messaging-sw.js';`

Answer 2

我正在使用 react-boiler-plate，它没有公共文件夹，我们必须在其中放置 firebase-messaging-sw.js。在 react-boiler-plate 中我们必须放这段代码

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
},

内部

<块引用>

internals/webpack/webpack.prod.babel.js

在 app.js 中我们必须像这样导入

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

它现在应该可以工作了:)