vue.js - Vue pwa with firebase cloud messaging not working properly

Question

im trying the following code:

    navigator.serviceWorker.register('service-worker.js')
      .then((registration) => {
        const messaging = firebase.messaging().useServiceworker(registration)
        console.log(messaging)
        messaging.requestPermission().then(function () {
          console.log('Notification permission granted.')
          messaging.getToken().then(function (currentToken) {
            if (currentToken) {
              console.log(currentToken)
            }
          })
        })
      })

my manifest:

{
  "name": "Herot-Eyes",
  "short_name": "herot-eyes",
  "gcm_sender_id": "103953800507",
  "icons": [
    {
      "src": "/static/img/icons/herot-eyes-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/herot-eyes-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/apple-touch-icon-180x180.png",
      "sizes": "180x180",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "fullscreen",
  "orientation": "portrait",
  "background_color": "#000000",
  "theme_color": "#2196f3"
}

what is going wrong? my console.log(messaging) is returning a factory error, the following:

bad-push-set : "The FCM push set used for storage / lookup was not not a valid push set string." bad-scope

"The service worker scope must be a string with at least one character." bad-sender-id

"Please ensure that 'messagingSenderId' is set correctly in the options passed into firebase.initializeApp()." bad-subscription

"The subscription must be a valid PushSubscription." bad-token : "The FCM Token used for storage / lookup was not a valid token string." bad-vapid-key

"The public VAPID key is not a Uint8Array with 65 bytes." bg-handler-function-expected

"The input to setBackgroundMessageHandler() must be a function." delete-scope-not-found

"The deletion attempt for service worker scope could not be performed as the scope was not found." delete-token-not-found

"The deletion attempt for token could not be performed as the token was not found." failed-delete-vapid-key

"The VAPID key could not be deleted." failed-serviceworker-registration

"We are unable to register the default service worker. {$browserErrorMessage}" failed-to-delete-token

"Unable to delete the currently saved token." get-subscription-failed

"There was an error when trying to get any existing Push Subscriptions." incorrect-gcm-sender-id

"Please change your web app manifest's 'gcm_sender_id' value to '103953800507' to use Firebase messaging." invalid-delete-token

"You must pass a valid token into deleteToken(), i.e. the token from getToken()." invalid-public-vapid-key

"The public VAPID key must be a string." invalid-saved-token

"Unable to access details of the saved token." no-fcm-token-for-resubscribe

"Could not find an FCM token and as a result, unable to resubscribe. Will have to resubscribe the user on next visit." no-sw-in-reg

"Even though the service worker registration was successful, there was a problem accessing the service worker itself." no-window-client-to-msg

"An attempt was made to message a non-existant window client." notifications-blocked

"Notifications have been blocked." only-available-in-sw

"This method is available in a service worker context." only-available-in-window

"This method is available in a Window context." permission-blocked

"The required permissions were not granted and blocked instead." permission-default

"The required permissions were not granted and dismissed instead." public-vapid-key-decryption-failed

"The public VAPID key did not equal 65 bytes when decrypted." should-be-overriden

"This method should be overriden by extended classes." sw-reg-redundant

"The service worker being used for push was made redundant." sw-registration-expected

"A service worker registration was the expected input." token-subscribe-failed

"A problem occured while subscribing the user to FCM: {$message}" token-subscribe-no-push-set

"FCM returned an invalid response when getting an FCM token." token-subscribe-no-token

"FCM returned no token when subscribing the user to push." token-unsubscribe-failed

"A problem occured while unsubscribing the user from FCM: {$message}" token-update-failed

"A problem occured while updating the user from FCM: {$message}" token-update-no-token

"FCM returned no token when updating the user to push." unable-to-resubscribe

"There was an error while re-subscribing the FCM token for push messaging. Will have to resubscribe the user on next visit. {$message}" unsupported-browser

"This browser doesn't support the API's required to use the firebase SDK." use-sw-before-get-token

"You must call useServiceWorker() before calling getToken() to ensure your service worker is used."

Answer 1

Waitting for answers