如何获得FCM代币？

Question

我正在尝试在 React js 应用程序中获取 FCM 令牌。我尝试的第一件事是使用 messaging.useServiceWorker(registration)，然后使用 messaging.getToken()，它在 Firefox 和 google chrome 的本地主机上工作正常，但在 HTTPS 实时服务器上它在 Firefox 上工作正常但在 chrome 中它会抛出一个错误： DOMException: Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker.

我看到了 firebase 文档并发现 messaging.useServiceWorker is deprecated now and I have to use messaging.getToken({ serviceWorkerRegistration }) 但它抛出了一个错误： FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:3000/firebase-cloud-messaging-push-scope') with script ('http://localhost:3000/firebase-messaging-sw.js'): The script has an unsupported MIME type ('text/html'). (messaging/failed-service-worker-registration).

备注

firebase-messaging-sw.js 文件在 public 目录下。
firebase-messaging-sw.js 文件为空。
这是我注册 Service Worker 的方式：

export const registerServiceWorker = () => {
  if ("serviceWorker" in navigator) {
    return new Promise((resolve, reject) => {
      navigator.serviceWorker
      .register(process.env.PUBLIC_URL + "/firebase-messaging-sw.js")
      .then(function (registration) {
        console.log("[registration]", registration)
        
        // messaging.useServiceWorker(registration)



          resolve(registration);
        })
        .catch(function (err) {
          console.log("[ERROR registration]: ", err)
          reject(null);
        });
    });
  } else {
    console.log("SERVICE WORKER NOT IN THE BROWSER")
  }
};

写入方式获取FCM token应该怎么做？

Answer 1

我找到了这个问题的解决方案，这是我的代码：

class Firebase {
  constructor() {
    if (firebase.apps.length) return;
    firebase.initializeApp(config);
    this.auth = firebase.auth();
    this.messaging = firebase.messaging();
    navigator.serviceWorker.getRegistrations().then((registrations) => {
      if (registrations.length) {
         [this.registration] = registrations;
         return;
      }
      navigator.serviceWorker
        .register("/firebase-message-sw.js")
        .then((registration) => {
           this.registration = registration;
        });
      });
  }

  async askNotificationPermission() {
    try {
      const token = await this.messaging.getToken({
        serviceWorkerRegistration: this.registration,
      });
      return token;
    } catch (error) {
      console.error("[FIREBASE ERROR]: ", error);
      return null;
    }
  }
}

我正在通过单击操作触发 askNotificationPermission 函数。

如何获得FCM代币？

How to get FCM token?

javascript

google-chrome

firebase

reactjs

firebase-cloud-messaging