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.

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.

• javascript
• firebase
• vue.js
• vuejs2

• Can you add the error as text instead of an image? I don't have my magnifying glass with me so I can't read it. – André Kool Commented Jun 5, 2018 at 15:24
• Here i added the error as text. – Reo93 Commented Jun 5, 2018 at 15:32
• @Reo93 Can you open Chrome Dev Tools -> Application -> Service Worker and see if you have a service worker that has been registered? If yes click unregister and refresh the page again. – Derek Pollard Commented Jun 5, 2018 at 15:35
• It is unregistered. I have uploaded the picture in the question. – Reo93 Commented Jun 5, 2018 at 15:53
• I'm also facing the same issue of unsupported MIME type – Prashant Luhar Commented Oct 10, 2019 at 12:03

1 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./firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic./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 )