0

I am trying to connect my ReactJs app to firebase to implement push notifications. Every time I try to console log the token that I get from firebase, this error always shows up and I don't know how I can solve it. Here is a screenshot of the error :

enter image description here

I added the following lines in my firebase-messaging-sw.js which is located inside my public file and here it is :

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

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('../firebase-messaging-sw.js')
        .then(function (registration) {
            console.log('Registration successful, scope is:', registration.scope);
        }).catch(function (err) {
            console.log('Service worker registration failed, error:', err);
        });
}

firebase.initializeApp({
    messagingSenderId: "msg_id",
})

const initMessaging = firebase.messaging()

There is also the file firebase.js and its content which I get the data inside the config object from my firebase project which is already registered :

import firebase from "firebase";

const config = {
    apiKey: "my_api_key",
    authDomain: "my_domain",
    databaseURL: "my_database_url",
    projectId: "project_id",
    storageBucket: "storage-bucket",
    messagingSenderId: "msg_id",
    appId: "app_id",
    measurementId: "measure_id"
}

firebase.initializeApp(config);
firebase.analytics();

export default firebase; 

And here is my useEffect where I am trying to print the token :

   useEffect(() => {
        const messaging = firebase.messaging();
        messaging.requestPermission().then(() => {
            return messaging.getToken()
        }).then(token => {
            console.log("TOKEN :", token)
        })
    }, [])

I tried many fixes and nothing worked and I still get the same error. I hope that anyone can help me with this. Thanks in advance.

4
  • See here stackoverflow.com/questions/49566059/… Commented Jul 20, 2020 at 9:04
  • @designtocode is it something that we need to handle in the backend or the frontend?! Commented Jul 20, 2020 at 9:16
  • It's the frontend settings on how you load the service worker @saif Commented Jul 20, 2020 at 9:24
  • @designtocode I tried all the fixes there and nothing worked. There is a solution that needs to be done with ngix to accept that MIME type but I have no clue how to do it. Commented Jul 20, 2020 at 9:27

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.