Firebase/Polymerfire 2.0 - Messaging issue- Error: Polymer 2.0 - Firebase Messaging Error - Uncaught (in promise) DOMException: Registration failed - push service #345
Description
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)
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