Uncaught [firebase_messaging/failed-service-worker-registration] Messaging: We are unable to register the default service worker

flutter web

I am getting this error in live flutter web project. Uncaught [firebase_messaging/failed-service-worker-registration] Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('https://jordanaqqar.com/firebase-cloud-messaging-push-scope') with script ('https://jordanaqqar.com/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script.

Error image

Here is my index.html

    <!DOCTYPE html>
<html>

<head>
    <!--
      If you are serving your web app in a path other than the root, change the
      href value below to reflect the base path you are serving from.

      The path provided below has to start and end with a slash "/" in order for
      it to work correctly.

      Fore more details:
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
    -->
    <base href="/appname/">
    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta name="description" content="A new Property aplication.">
    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="app_name">
    <meta name="google-signin-client_id" content="client_key">
    <link rel="apple-touch-icon" href="icons/Icon-192.png">
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="favicon.png" />
    <title>jordan_aqqar</title>
    <link rel="manifest" href="manifest.json">
    <script src="https://maps.googleapis.com/maps/api/js?key=KEY"></script>
</head>


<body>
<!-- This script installs service_worker.js to provide PWA functionality to
 application. For more information, see:
 https://developers.google.com/web/fundamentals/primers/service-workers
  -->

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-messaging.js"></script>
<!--<script src="https://www.gstatic.com/firebasejs/firebase/8.8.0/firebase-messaging.js"></script>-->
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-auth.js"></script>

<script>
        if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
            navigator.serviceWorker.register('/appname/firebase-messaging-sw.js');
      });
    }
</script>

<!-- Firebase Configuration -->
<script>
        var firebaseConfig = {
                               apiKey: "APIKEY",
                               authDomain: "AUTHDOMAIN",
                               projectId: "PROJECTID",
                               storageBucket: "STORAGEBUCKET",
                               messagingSenderId: "MESSAGINGSENDERID",
                               appId: "APPID",
                               measurementId: "MEASUREMENTID"
};
         firebase.initializeApp(firebaseConfig);
    </script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

and this is firebase-messaging-sw.js file

importScripts("https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.8.0/firebase-messaging.js");


  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  firebase.initializeApp({
                           apiKey: "APIKEY",
                           authDomain: "AUTHDOMAIN",
                           projectId: "PROJECTID",
                           storageBucket: "STORAGEBUCKET",
                           messagingSenderId: "MESSAGINGSENDERID",
                           appId: "APPID",
                           measurementId: "MEASUREMENTID"
                         });
  // Initialize Firebase
  firebase.analytics();

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function (payload) {
    const promiseChain = clients
        .matchAll({
            type: "window",
            includeUncontrolled: true
        })
        .then(windowClients => {
            for (let i = 0; i < windowClients.length; i++) {
                const windowClient = windowClients[i];
                windowClient.postMessage(payload);
            }
        })
        .then(() => {
            return registration.showNotification("New Message");
        });
    return promiseChain;
});

self.addEventListener('notificationclick', function (event) {
    console.log('notification received: ', event)
});