Firebase 云消息传递无法在 Vue 3 上获取令牌答案

【问题标题】：Firebase Cloud Messaging Unable to Get Token on Vue 3Firebase 云消息传递无法在 Vue 3 上获取令牌
【发布时间】：2022-12-03 01:08:41
【问题描述】：

我正在创建一个应用程序，它将通过 firebase 云消息传递获得实时通知，但它似乎对我不起作用。我正在按照他们的文档将 firebase-messaging-sw.js 放在我的 vue 项目的根目录中。

我将演示发布在stackblitz

这是我的 App.vue

<script setup lang="ts">
  import { useTheme } from './services/vuestic-ui/themes'
  import { initializeApp } from "firebase/app"
  import { getMessaging, getToken } from "firebase/messaging"
  const firebaseConfig = {
    apiKey: "",
    authDomain: ",
    databaseURL: "m",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "2",
    appId: ""
  }

// Initialize Firebase
const app = initializeApp(firebaseConfig)
const messaging = getMessaging(app)
getToken(messaging, { vapidKey: 'mykey' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
    console.log({currentToken})
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
})

</script>

如果你运行演示它会说An error occurred while retrieving token. FirebaseError: Messaging: We are unable to register the default service worker. 关于使用 vue 3 的 Firebase 云消息传递的文档很少，我不知道如何正确注册服务工作者，如何让这个 Firebase 云消息传递在 vue 3 上工作？

【问题讨论】：

标签： firebase vue.js firebase-cloud-messaging vuejs3 service-worker

【解决方案1】：

Firebase 无法访问路由firebase-messaging-sw.js，这就是您收到此错误的原因。

只需在名为firebase-messaging-sw.js 的公共文件夹中创建一个空的 JavaScript 文件，此错误就会消失。

【讨论】：