javascript - ServiceWorker 注册失败 : The script has an unsupported MIME type - 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 样板文件:

我是这样加的:

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';`