I want to ask about Firebase and Service Worker: Error: A bad HTTP response code (404) was received when fetching the script

[dinhan1192]

I use Air Frame, so my structure is like this:

Because there is no public folder, so I try adding one.

My firebase-messaging-sw.js:

import * as firebase from "firebase";
import "firebase/database";
import 'firebase/messaging';

var firebaseConfig = {
apiKey: "xxxx",
authDomain: "xxxx",
projectId: "myhealthqlpkv1",
storageBucket: "xxxx",
messagingSenderId: "xxxxx",
appId: "xxxx",
measurementId: "xxxx"
};
// Initialize Firebase
firebase.default.initializeApp(firebaseConfig);
// var db = firebase.default.database().ref();

const messaging = firebase.default.messaging();
export default messaging;

In my Login.js, I try to register and getToken:

import messaging from "../../../public/firebase-messaging-sw"
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("/firebase-messaging-sw.js")
.then(function(registration) {
console.log("Registration successful, scope is:", registration.scope);
messaging.getToken({vapidKey: 'xxxx', serviceWorkerRegistration : registration })
.then((currentToken) => {
if (currentToken) {
console.log('current token for client: ', currentToken);
localStorage.setItem('registrationToken', currentToken);

        // Track the token -> client mapping, by sending to backend server
        // show on the UI that permission is secured
      } else {
        console.log('No registration token available. Request permission to generate one.');

        // shows on the UI that permission is required 
      }
    }).catch((err) => {
      console.log('An error occurred while retrieving token. ', err);
      // catch error while creating client token
    });  
  })
  .catch(function(err) {
    console.log("Service worker registration failed, error:"  , err );
}); 

}

I run into that error, can you help me? When I used the create-react-app originally, I was successful to get the token. But now I can't @@ Pls, I want to use this airframe.