在Bubble.io中运行Firebase Messaging脚本报错：Service messaging不可用

报错核心原因 #

这个错误通常由以下几种情况导致：

• Firebase核心库与Messaging库版本不兼容
• 页面未处于HTTPS环境（Firebase Messaging强制要求，localhost调试除外）
• 缺少必要的Service Worker配置
• 脚本运行时机过早，页面环境未完全准备完成

解决方案 #

1. 统一Firebase库版本 #

你当前代码中firebase/app使用9.6.6版本，firebase/messaging使用9.6.9版本，版本不匹配会引发兼容性问题，将两者改为相同版本：

<script type="importmap">
{
    "imports": {
        "firebase/app": "https://www.gstatic.com/firebasejs/9.6.9/firebase-app.js",
        "firebase/messaging": "https://www.gstatic.com/firebasejs/9.6.9/firebase-messaging.js"
    }
}
</script>

2. 配置并注册Service Worker #

Firebase Messaging依赖Service Worker接收推送消息，按以下步骤操作：

• 创建firebase-messaging-sw.js文件，内容如下：

  importScripts('https://www.gstatic.com/firebasejs/9.6.9/firebase-app-compat.js');
  importScripts('https://www.gstatic.com/firebasejs/9.6.9/firebase-messaging-compat.js');
  
  const firebaseConfig = {
      // 你的Firebase配置信息
  };
  
  firebase.initializeApp(firebaseConfig);
  const messaging = firebase.messaging();
  

• 将该文件上传到Bubble的Assets（设置→文件）中，获取文件的公开访问链接
• 在HTML脚本中添加Service Worker注册逻辑：

  <script type="module">
  import { initializeApp } from 'firebase/app';
  import { getMessaging, getToken } from 'firebase/messaging';
  
  const firebaseConfig = {
      // 你的Firebase配置
  };
  
  // 等待页面加载完成后再初始化
  document.addEventListener('DOMContentLoaded', async () => {
      const app = initializeApp(firebaseConfig);
      
      if ('serviceWorker' in navigator) {
          try {
              // 注册Service Worker
              await navigator.serviceWorker.register('你的firebase-messaging-sw.js公开链接');
              const messaging = getMessaging(app);
              
              // 获取推送令牌（需提前在Firebase控制台生成VAPID密钥）
              const token = await getToken(messaging, {
                  vapidKey: '你的Firebase控制台VAPID密钥'
              });
              console.log('推送令牌:', token);
          } catch (error) {
              console.error('初始化失败:', error);
          }
      } else {
          console.error('当前浏览器不支持Service Worker');
      }
  });
  </script>
  

3. 确认HTTPS环境 #

Firebase Messaging仅允许在HTTPS环境下运行（localhost调试除外），确保你的Bubble页面使用HTTPS链接：Bubble官方域名*.bubbleapps.io默认是HTTPS，自定义域名需配置SSL证书。

4. 检查Firebase项目配置 #

• 登录Firebase控制台，进入目标项目→Cloud Messaging
• 在Web配置中生成并复制VAPID密钥，填入上述代码对应位置
• 确认Cloud Messaging服务已启用

内容的提问来源于stack exchange，提问作者Ethan Leonard