Add Service worker to a vuejs/firebase web application

Question

am tryind to add a service worker to my vuejs application. and this is what i get: ServiceWorker registration failed: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. i have searching a lot but i can't figure out where the problem is. the reason of adding a service worker is to save the Token of any device logged in the app and be able to send them notification. in index.html : static/manifest.json">

// app.js
var config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: ''
};
firebase.initializeApp(config);

const messaging = firebase.messaging();
let userToken    = null,
    isSubscribed = false

window.addEventListener('load', () => {

    if ('serviceWorker' in navigator) {

      navigator.serviceWorker.register("firebase-messaging-sw.js", {scope: "firebase-cloud-messaging-push-scope"}).then(function (registration) {
  const messaging = firebase.messaging();
  messaging.useServiceWorker(registration);

  }).catch(function (err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);

  })
    } else {
    }
});

messaging.requestPermission().then(function() {
   //getToken(messaging);
   return messaging.getToken();
}).then(function(token){
console.log(token);
})
.catch(function(err) {
console.log('Permission denied', err);
});


messaging.onMessage(function(payload){
console.log('onMessage: ',payload);
});

// firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');
self.addEventListener('notificationclick', event => {
    console.log(event)

    event.notification.close()

    event.waitUntil(
        self.clients.openWindow('/')
    )
})
   var config = {
        apiKey: '',
        authDomain: '',
        databaseURL: '',
        projectId: '',
        storageBucket: '',
        messagingSenderId: ''
      };

      firebase.initializeApp(config);
      const messaging = firebase.messaging();

//manifest.json

{
  "name": "Du",
  "short_name": "Du",
  "icons": [
    {
      "src": "/static/img/icons/cro-icon-64x64.png",
      "sizes": "64x64",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/cro-icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "fullscreen",
  "orientation": "portrait",
  "background_color": "#2196f3",
  "theme_color": "#2196f3",
   "gcm_sender_id": ""
}

console project folder console2