CODEWITHSUNDEEP
javascriptpush-notificationfirebase-cloud-messagingprogressive-web-apps
Cohchi
Cohchi

Reputation: 563

messaging/incorrect-gcm-sender-id firebase PWA

I did a PWA and I'm now looking to add the notifications. I want to use Cloud Messaging (Firebase) and I have some problems. I followed a tutorial, I added in my manifest.json, this line: 

"gcm_sender_id": "My sender ID".

In my index.html I added

<script src = "https://www.gstatic.com/firebasejs/4.1.1/firebase-app.js">
</ script>
<script src = "https://www.gstatic.com/firebasejs/4.1.1/firebase-messaging.js"> <script>
    var config = {
        apiKey: "My api",
authDomain: "example.firebaseapp.com",
databaseURL: "https://example.firebaseio.com",
projectId: "example",
storageBucket: "example.appspot.com",
messagingSenderId: "My sender ID"

    };
    firebase.initializeApp (config);
    const messaging = firebase.messaging ();
 messaging
.requestPermission ()
then (function () {
 console.log ("Notification permission granted.");
 return messaging.getToken ();
})
.then (function (token) {
console.log ("token is:" + token);
})
.catch (function (err) {
console.log ("Unable to get permission to notify.", err);
});
</ Script>

With that, I get the following error:

Messaging: Please change your web app manifest 'gcm_sender_id' value to '103953800507' to use Firebase messaging. (Messaging / incorrect-gcm-sender-id)

I searched a little and on github (https://github.com/realtime-framework/WebPushNotifications) they say to change the SENDER ID by what is written in the console

So I modify my manifest.json and I get the following error

A bad HTTP response code (404) was received when fetching the script. Failed to load resource: net :: ERR_INVALID_RESPONSE /firebase-messaging-sw.js

Messaging: We are unable to register the default service worker." Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. (Messaging / failed-serviceworker-registration).

I can not find what I have to do, I admit to being a little lost.

Upvotes: 2

Views: 1641

Answers (2)

SW_Cali
SW_Cali

Reputation: 393

For anyone coming across this issue, like I did, this is what i put into the file

self.addEventListener('push', function(event) {
  console.log('[Service Worker] Push Received.');
  //console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);

  const title = 'Push Codelab';
  const options = {
    body: 'Yay it works.',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});



importScripts('https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.6/firebase-messaging.js');
//importScripts('https://www.gstatic.com/firebasejs/init.js');


  var firebaseConfig = {
    apiKey: "****",
    authDomain: "****",
    projectId: "****",
    storageBucket: "****",
    messagingSenderId: "****",
    appId: "****",
    measurementId: "****"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  //firebase.analytics();

if (firebase.messaging.isSupported()) {
  firebase.messaging();
  console.log('FB Messaging Supported');
}


  const messaging = firebase.messaging();
messaging.onBackgroundMessage((payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Replacing the **** with your own data from the firebase dashboard

Upvotes: 1

Waqas K
Waqas K

Reputation: 164

Now you will have to add another file to your root directory with this name "firebase-messaging-sw.js" and it can be empty file. it will probably fix the error. but you need to update this file later that you will know in your next steps of firebase messaging implementation.

Upvotes: 0

Related Questions