Why I getting an error while trying to retrieving token from firebase in Vue js?

Question

I'm trying to implement firebase to my vue.js project but I'm getting error on firebase.messaging.getToken(). Here is the screenshot of my problem

Error:

The script has an unsupported MIME type ('text/html').

Failed to load resource: net::ERR_INSECURE_RESPONSE

Unable to get permission to notify.

• browserErrorMessage : "Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html')."

• code : "messaging/failed-serviceworker-registration"

• message : "Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html'). (messaging/failed-serviceworker-registration)."

• stack : "FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html'). (messaging/failed-serviceworker-registration).↵ at eval (webpack-internal:///./node_modules/@firebase/messaging/dist/index.esm.js:1950:32)"

And here is my code.

firebase.messaging().requestPermission().then(function () {
  console.log('Notification permission granted.')
  return firebase.messaging().getToken()
    .then(function (currentToken) {
      console.log(currentToken)
    })
}).catch(function (err) {
  console.log('Unable to get permission to notify.', err)
})

Service Workers

Does anyone knows how to solve this problem? I tried in many ways but i could not figure it out. Can you please help me?

Thanks.

Answer 1

Try to put the file (or create a file) "firebase-messaging-sw.js" inside the /public folder

inside the firebase-messaging-sw.js copy and paste this (and change YOUR-SENDER-ID) :

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  'messagingSenderId': 'YOUR-SENDER-ID'
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.

const messaging = firebase.messaging();

Worked for me ( using React )