Uncaught (in promise) DOMException: Registration failed - push service error

[vinayakvanarse]

I have a PWA app using Polymer 2.0 and firebase.
Firebase messaging is throwing error - Uncaught (in promise) DOMException: Registration failed - push service error.

Describe your environment

Operating System version: Mac High Sierra 10.13.4
Firebase SDK - [email protected]
Firebase Tools version: 3.18.4
Firebase Product: messaging

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

I checked my manifest file and it is getting loaded correctly and has correct MIME/Type: application/json

Not sure how to resolve the issue.

Manifest file -->

{
"name": "<app_name>",
"short_name": "<app_name_short>",
"description": "",
"start_url": "./?utm_source=web_app_manifest",
"scope": "./",
"display": "standalone",
"theme_color": "#fff",
"background_color": "#fff",
"gcm_sender_id": "103953800507",
}

Source code - https://github.com/vinvantest/git_issue_firebase_login

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 ....

And the
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",

{
"name": "<app_name>",
"short_name": "<app_name_short>",
"description": "",
"start_url": "./?utm_source=web_app_manifest",
"scope": "./",
"display": "standalone",
"theme_color": "#fff",
"background_color": "#fff",
"gcm_sender_id": "103953800507",
}

[mmermerkaya]

Which browser are you using?

[vinayakvanarse]

Hi, It is Chrome Desktop & android - Version 67.0.3396.87 (Official Build) (64-bit)

[mmermerkaya]

A Push Service Error usually means there's something wrong with your configs. Have you tried setting a VAPID key?

[vinayakvanarse]

What is wrong with the config? Do you mean in Manifest.json?

[mmermerkaya]

No, I mean how you initialize Messaging in your code. Since I'm not familiar with Polymer I'll once again refer you to polymerfire: FirebaseExtended/polymerfire#345

I'm closing this issue as a duplicate of #771.