Firebase/Polymerfire 2.0 - Messaging issue- Error: Polymer 2.0 - Firebase Messaging Error - Uncaught (in promise) DOMException: Registration failed - push service

[vinayakvanarse]

Git Source code to replicate the issue

https://github.com/vinvantest/git_issue_firebase_login

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.

firebase/firebase-js-sdk#771
Firebase team has suggested to open a new issue in polymerfire group as they believe it is related to Polymerfire.

Environment
Operating System version: Mac High Sierra 10.13.4
Firebase SDK - [email protected]
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 firebase#4.13.0
bower polymerfire#^2.2.1 install polymerfire#2.2.1

The messaging doesn't work in Chrome - [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

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.

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

Code used (if someone doesn't have GitHub access)
`
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>

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': ''
});

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.

• [Yes ] Chrome
• [ No] Firefox
• [ No] Safari 9
• [ No] Safari 8
• [ No] Safari 7
• [ N/A] Edge
• [ N/A] IE 11
• [ N/A] IE 10

[vinayakvanarse]

Hi, any progress or help... No one has picked it up

[vinayakvanarse]

Git source code to replicate the issue

https://github.com/vinvantest/git_issue_firebase_login