Vue 3中Firebase Cloud Messaging无法获取Token问题求助

针对你遇到的FirebaseError: Messaging: We are unable to register the default service worker错误，核心问题是Service Worker文件的位置不对，以及Vite环境下需要手动处理Service Worker的注册流程，具体解决步骤如下：

1. 修正Service Worker文件位置 #

Vue3 + Vite项目中，只有public目录下的文件会被原样打包到构建产物的根目录。你需要把firebase-messaging-sw.js移动到项目的public文件夹中，而不是项目根目录。

public/firebase-messaging-sw.js的示例内容：

importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging.js');

const firebaseConfig = {
  // 填入你的Firebase配置
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// 处理后台消息（可选）
messaging.onBackgroundMessage((payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/firebase-logo.png' // 替换成你的通知图标路径
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

2. 手动注册Service Worker并获取Token #

在Vue组件中，需要先手动注册Service Worker，再初始化Firebase并请求Token，同时要确保先获取用户的通知权限。修改你的App.vue代码如下：

<script setup lang="ts">
import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from "firebase/messaging";

const firebaseConfig = {
  // 填入你的有效Firebase配置
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

// 初始化Firebase
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

// 注册Service Worker并获取Token
async function setupFCM() {
  try {
    // 请求用户通知权限
    const permission = await Notification.requestPermission();
    if (permission !== 'granted') {
      throw new Error('用户拒绝了通知权限');
    }

    // 注册Service Worker
    const registration = await navigator.serviceWorker.register('/firebase-messaging-sw.js');
    console.log('Service Worker注册成功:', registration);

    // 获取FCM Token
    const currentToken = await getToken(messaging, {
      vapidKey: '你的VAPID密钥',
      serviceWorkerRegistration: registration
    });

    if (currentToken) {
      console.log('FCM Token:', currentToken);
      // 这里可以将Token发送到你的后端服务器
    } else {
      console.log('无法获取Token，请检查配置和权限');
    }

    // 处理前台消息
    onMessage(messaging, (payload) => {
      console.log('前台收到消息:', payload);
      // 自定义前台消息展示逻辑
    });
  } catch (err) {
    console.error('FCM初始化失败:', err);
  }
}

// 页面加载时执行
setupFCM();
</script>

3. 关键注意事项 #

• Firebase配置有效性：确保firebaseConfig中的所有字段都是从Firebase控制台复制的有效内容，尤其是messagingSenderId和vapidKey（VAPID密钥需要从Firebase控制台的Cloud Messaging设置中获取）。
• HTTPS环境：FCM要求网站运行在HTTPS环境下（localhost除外），StackBlitz的环境已经满足这一点，本地开发可以使用localhost或者配置Vite启用HTTPS。
• Service Worker路径：注册Service Worker时的路径/firebase-messaging-sw.js必须是根路径，因为Service Worker的作用域限制。

内容的提问来源于stack exchange，提问作者Matius Nugroho Aryanto