Polymer 2.0 - Firebase Messaging Error - 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 - firebase@4.13.0
• Firebase Tools version: 3.18.4
• Firebase Product: messaging

bower polymerfire#^2.2.1 cached https://github.com/firebase/polymerfire.git#2.2.1
bower polymerfire#^2.2.1 validate 2.2.1 against https://github.com/firebase/polymerfire.git#^2.2.1
bower firebase#* cached https://github.com/firebase/firebase-bower.git#4.6.1
bower firebase#* validate 4.6.1 against https://github.com/firebase/firebase-bower.git#*
bower firebase#* new version for https://github.com/firebase/firebase-bower.git#*
bower firebase#* resolve https://github.com/firebase/firebase-bower.git#*
bower firebase#* download https://github.com/firebase/firebase-bower/archive/v4.13.0.tar.gz
bower firebase#* extract archive.tar.gz
bower firebase#* resolved https://github.com/firebase/firebase-bower.git#4.13.0
bower firebase#^4.13.0 install #4.13.0
bower polymerfire#^2.2.1 install polymerfire#2.2.1

The messaging doesn't work in Chrome Desktop - [Google Chrome is up to date
Version 66.0.3359.139 (Official Build) (64-bit)] as well as in Chrome Android - [Application version Chrome 66.0.3359.126

Error trace in Chrome console Desktop version -
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

Code used

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

Request help to resolve the issue. I have been on this issue for long and don't know why its happening and how to fix it.

I have also added a comment on the issue on GITHUB -
#152

[google-oss-bot]

Hey there! I couldn't figure out what this issue is about, so I've labeled it for a human to triage. Hang tight.

[google-oss-bot]

Hmmm this issue does not seem to follow the issue template. Make sure you provide all the required information.

[mmermerkaya]

Firebase SDK does not have a 3.18.4 version. See versions on NPM here.

Please let us know the actual SDK version you're using.

[vinayakvanarse]

My bad. The Firebase SDK version is - firebase@4.13.0. Updated the Problem Ticket.

[vinayakvanarse]

Hi, any luck in resolving or guidance on where it is going wrong.

[mmermerkaya]

I can't reproduce this. Do you have an online app that I can test? Or somewhere I can see your whole project?

[mmermerkaya]

Closing for now, will reopen if you can help us reproduce the issue.

[vinayakvanarse]

Hi, I have attached screenshots of the behaviour. Sequence of events is stored as filename in chronological order just to simplify things. I have also attached 3 files from the PWA namely .. index.html, my-app.html (main element), login.html and firebase-sw.js. Hope it will provide all the context to the issue.

I got another issue on login (but will set it out in different GIT issue) .....I did further testing and it works fine in SAFARI (both desktop and iPhone 6). Works fine in CHROME (desktop) .. just doesn't work fine in Pixel, Pixel XL and other android phones. All android after 1st time login to the PWA (which happens quite straight through)... subsequent logins are always double attempt.

Please reopen the issue as it's still happening.

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