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.
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
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.
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.
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.
https://github.com/firebase/firebase-js-sdk/issues/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 - 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 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)
<firebase-app auth-domain="[[configFirebase.authDomain]]" database-url="[[configFirebase.databaseURL]]" api-key="[[configFirebase.apiKey]]" storage-bucket="[[configFirebase.storageBucket]]" messaging-sender-id="[[configFirebase.messagingSenderId]]">
<firebase-auth id="auth" user="{{user}}" signed-in="{{signedIn}}" status-known="{{statusKnown}}" on-error="_handleError">
<firebase-messaging id="messaging" token="{{token}}" on-message="handleMessage" active="{{fcmActive}}" status-known="{{fcmStatusKnown}}">
class MyApp extends Polymer.Element { static get is() { return 'my-app'; }
_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); }) } }
And the firebase-messaging-sw.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.