firebase-cloud-messaging - Polymer 2.0 - Firebase 消息传递错误 - 未捕获（承诺）DOMException：注册失败 - 推送服务错误

Question

我有一个使用 Polymer 2.0 和 firebase 的 PWA 应用程序。Firebase 消息传递错误。

 Firebase v3.18.4
 "polymer": "Polymer/polymer#^2.0.0",
 "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
 "polymerfire": "firebase/polymerfire#^2.2.0",

Uncaught (in promise) DOMException: Registration failed - push service error
  Promise.then (async)      
  refreshToken  @   firebase-messaging.html:87
  activateMessaging @   firebase-messaging.html:125
  activate  @   firebase-messaging.html:243
  _bootstrapApp @   firebase-messaging.html:259
  runMethodEffect   @   property-effects.html:813
  runEffectsForProperty @   property-effects.html:159
  runEffects    @   property-effects.html:125
  _propertiesChanged    @   property-effects.html:1703
  _flushProperties  @   properties-changed.html:338
  _flushProperties  @   property-effects.html:1551
  _invalidateProperties @   property-effects.html:1523
  _setProperty  @   property-effects.html:1508
  Object.defineProperty.set @   properties-changed.html:150
  __appNameChanged  @   firebase-common-behavior.html:47
  runObserverEffect @   property-effects.html:214
  runEffectsForProperty @   property-effects.html:159
  runEffects    @   property-effects.html:125
  _propertiesChanged    @   property-effects.html:1703
  _flushProperties  @   properties-changed.html:338
  _flushProperties  @   property-effects.html:1551
  ready @   property-effects.html:1656
  ready @   element-mixin.html:546
  ready @   dir-mixin.html:140
  ready @   legacy-element-mixin.html:198
  ready @   class.html:232
  ready @   class.html:232
  ready @   class.html:232
  _enableProperties @   properties-changed.html:321
  connectedCallback @   properties-mixin.html:208
  connectedCallback @   element-mixin.html:532
  connectedCallback @   dir-mixin.html:150
  connectedCallback @   legacy-element-mixin.html:105
  _attachDom    @   element-mixin.html:588
  _readyClients @   element-mixin.html:561
  _flushClients @   property-effects.html:1565
  _propertiesChanged    @   property-effects.html:1699
  _flushProperties  @   properties-changed.html:338
  _flushProperties  @   property-effects.html:1551
  ready @   property-effects.html:1656
  ready @   element-mixin.html:546
  ready @   my-app.html:540
  _enableProperties @   properties-changed.html:321
  connectedCallback @   properties-mixin.html:208
  connectedCallback @   element-mixin.html:532
  (anonymous)   @   my-app.html:849

消息在 Chrome 桌面中不起作用 - [Google Chrome 是最新版本 66.0.3359.139（官方构建）（64 位）] 以及 Chrome Android - [应用程序版本 Chrome 66.0.3359.126

使用的代码

my-app.html (PolymerElement)

<script src="bower_components/firebase/firebase-app.js"></script>
<script src="bower_components/firebase/firebase-auth.js"></script>
<script src="bower_components/firebase/firebase-database.js">      
 </script>
 <script src="bower_components/firebase/firebase-firestore.js">  
 </script>
 <script src="bower_components/firebase/firebase-messaging.js">   
 </script>
 <script src="bower_components/firebase/firebase-storage.js"> 
 </script>

  <firebase-app
    auth-domain="[[configFirebase.authDomain]]"
    database-url="[[configFirebase.databaseURL]]"
    api-key="[[configFirebase.apiKey]]"
    storage-bucket="[[configFirebase.storageBucket]]"
    messaging-sender-id="[[configFirebase.messagingSenderId]]">
  </firebase-app>

  <firebase-auth
    id="auth"
    user="{{user}}"
    signed-in="{{signedIn}}"
    status-known="{{statusKnown}}"
    on-error="_handleError">
  </firebase-auth>

  <firebase-messaging
        id="messaging"
        token="{{token}}"
        on-message="handleMessage"
        active="{{fcmActive}}"
        status-known="{{fcmStatusKnown}}">
  </firebase-messaging>

   <firebase-document path="/users/[[user.uid]]/token" data=". 
    {{tokenDocVal}}">
   </firebase-document>

  class MyApp extends Polymer.Element {
       static get is() { return 'my-app'; }

    ready() {
      this.addEventListener('request-fcm-permission',        
         this._requestFcmPermission);
      super.ready();
    }

   _requestFcmPermission() {
      var fcm = this.$.messaging;
      var self = this;
      if (this.user && !fcm.active) {
        fcm.requestPermission()
          .then(function(){
            console.log('FCM permission granted');
            console.log('[[token]] ->' + self.token);
            self.tokenDocVal = self.token;
          })
          .catch(function(e){
            console.warn('FCM permission blocked', e);
          })
      }
    }

    ... other html code ....

和 firebase-messaging-sw.js

    importScripts('/bower_components/firebase/firebase-app.js');
    importScripts('/bower_components/firebase/firebase-
       messaging.js');

   firebase.initializeApp({
    'messagingSenderId': '<project-ms-id>'
   });

   var messaging = firebase.messaging();

   messaging.setBackgroundMessageHandler(function(payload) {
   console.log('[firebase-messaging-sw.js] Received background 
     message 
      ', payload);

   var notificationTitle = payload.notification.title;
   var notificationOptions = {
   body: payload.notification.body,
   icon: '../images/fresh/android/android-launchericon-24-24.png'
    };
   return self.registration.showNotification(notificationTitle,
    notificationOptions);
   });

   Manifest.json includes "gcm_sender_id": "103953800507",

请求帮助以解决问题。我一直在这个问题上，不知道它为什么会发生以及如何解决它。

我还在 GITHUB 上添加了对该问题的评论 -
https://github.com/firebase/firebase-js-sdk/issues/152

要复制的源代码：复制问题的 Git 源代码 https://github.com/vinvantest/git_issue_firebase_login

标签： firebase-cloud-messagingpolymer-2.x