firebase-messaging.js not found laravel

Question

Hello everyone I am making an application using firebase for push notifications. This is my first project in firebase. The issue I am having is with the connection as when I run the project and click on the login button it gives me

Notification permission granted

But after this it returns an error which is as follow.

A bad HTTP response code (404) was received when fetching the script. firebase.js:24 Unable to get permission to notify. FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:8000/firebase-cloud-messaging-push-scope') with script ('http://localhost:8000/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-serviceworker-registration). at https://www.gstatic.com/firebasejs/7.5.2/firebase-messaging.js:1:44674

I don't know why it is happening as I can see my js file and all the code as well, here is my config files.

In my firebase-messaging-sw.js which is on root directory the code is

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

firebase.initializeApp({
 'messagingSenderId': 'SenderID'
});

const messaging = firebase.messaging();
console.log(messaging);

messaging.setBackgroundMessageHandler(function(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'
};

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

And in my firebase.js file the code is as follow:

const firebaseConfig = {
apiKey: "API-KEY",
authDomain: "authDomain",
databaseURL: "DBURI",
projectId: "P-ID",
storageBucket: "SB",
messagingSenderId: "SenderID",
appId: "AppID",
measurementId: "MeasurementID"
};

firebase.initializeApp(firebaseConfig);

//------------------------------------------------------------------------------

const messaging = firebase.messaging();

messaging.requestPermission().then(function () {
console.log("Notification permission granted");
return messaging.getToken();
}).then(function (token) {
console.log(token);
}).catch(function (err) {
console.log("Unable to get permission to notify.", err);
});

//------------------------------------------------------------------------------

messaging.onMessage((payload) => {
console.log(payload);
})

Any help would be appreciated. Thank you in advance.

Mohsin Abbas Mohsin Abbas · Accepted Answer · 2019-12-17T10:19:54

I found the solution and it's working perfectly fine. Posting it for others who faces similar problem. The issue was in my firebase-messaging-sw.js file. I was initializing the firebase with sender id it was written in the documentation. I just initialized the firebase object with all the configuration values changing the initializing object solved my problem.

firebase-messaging.js not found laravel

1 Answers