Polymer 2.0集成Firebase Messaging报错：Registration failed - push service error

针对你遇到的Uncaught (in promise) DOMException: Registration failed - push service error错误，结合你使用的技术栈（Polymer 2.0、Firebase v3.18.4、polymerfire v2.2.0），下面是几个针对性的排查和解决方向：

1. 检查Firebase项目的Web推送配置 #

旧版本的Firebase（尤其是v3.x）需要手动配置Web Push的VAPID密钥，这是推送服务注册的核心凭证：

• 登录Firebase控制台，进入你的项目 → 项目设置 → Cloud Messaging标签
• 找到「Web配置」区域，确认已生成并保存了VAPID密钥对
• 在你的Polymer应用中，确保firebase-messaging元素的vapid-key属性正确填入了公钥部分

2. 确认Service Worker的配置和路径 #

Firebase Messaging依赖Service Worker，这一步出错是推送注册失败的常见原因：

• 确保你的firebase-messaging-sw.js（或自定义Service Worker文件）放置在项目根目录下，浏览器推送服务要求SW必须从根路径注册
• 如果使用自定义Service Worker，需要在初始化Messaging时通过useServiceWorker方法绑定正确的SW实例
• 打开浏览器开发者工具的「Application」→「Service Workers」面板，检查SW是否成功注册，有没有路径错误或权限警告

3. 排查版本兼容性问题 #

你使用的Firebase v3.18.4是比较老旧的版本，polymerfire v2.2.0虽然适配Polymer 2.x，但两者可能存在兼容性瑕疵：

• 尝试升级Firebase到v3.x分支的最新稳定版本（比如v3.9.0+），同大版本内的升级风险较低
• 查看polymerfire v2.2.0的官方文档，确认它对Firebase版本的要求，避免版本不匹配导致的隐性错误

4. 验证运行环境的合规性 #

推送服务有严格的环境要求：

• 生产环境必须使用HTTPS（localhost除外，开发时可直接用本地环境测试），确保你的服务器配置了有效SSL证书
• 确认用户使用的浏览器支持Push API和Service Worker（比如Chrome 50+、Firefox 44+），旧浏览器会直接拒绝推送注册

5. 修正代码层面的初始化逻辑 #

确保推送权限请求和Messaging初始化的流程符合浏览器规范：

• 现代浏览器要求必须在用户主动交互（比如点击按钮）后才能请求通知权限，不能在页面加载时自动请求，否则会被浏览器阻止，进而导致推送注册失败
• 确保先初始化firebase-app元素，再初始化firebase-messaging，避免依赖未就绪的Firebase实例

示例初始化代码 #

<firebase-app
  api-key="你的API密钥"
  auth-domain="你的Auth域名"
  database-url="你的数据库URL"
  project-id="你的项目ID"
  storage-bucket="你的存储桶"
  messaging-sender-id="你的Sender ID">
</firebase-app>

<firebase-messaging
  id="messaging"
  vapid-key="你的VAPID公钥">
</firebase-messaging>

<script>
  class MyApp extends Polymer.Element {
    static get is() { return 'my-app'; }
    
    ready() {
      super.ready();
      // 绑定一个按钮点击事件来请求权限
      this.$.requestPermBtn.addEventListener('click', () => {
        this.initMessaging();
      });
    }

    initMessaging() {
      this.$.messaging.requestPermission()
        .then(() => {
          console.log('通知权限已获取');
          return this.$.messaging.getToken();
        })
        .then(token => {
          console.log('FCM Token:', token);
          // 这里可以把Token上传到你的服务器
        })
        .catch(err => {
          console.error('权限请求或Token获取失败:', err);
        });
    }
  }
  customElements.define(MyApp.is, MyApp);
</script>

内容的提问来源于stack exchange，提问作者Vinayak Vanarse