FCM Web Push Chrome Issues in a CRA Environment - firebase

Question

I'm asking you a question because there was a problem linking FCM web push due to the CRA environment.
Browser Edge, Firefox has normal web push, but not only on Chrome. I checked if it was a browser notification permission issue, but there was no problem.
I tried to upload the firebase version from v8 to v9 version, but there was no change, so I am working on it again by lowering it to v8 version.
I want to know why push notifications are not available only on Chrome.
This is the contents of the console window in the edge browser by sending a notification to postman. I also send it from Chrome, but Chrome doesn't show anything on the console window.
OnMessage Even if I take a picture of the bottom console of the event, the event doesn't seem to be running.
enter image description here
-/public/firebase-messaging-sw.js
importScripts("https://www.gstatic.com/firebasejs/8.7.1/firebase-app.js");[enter image description here](https://i.stack.imgur.com/uk2q8.png)
importScripts(
"https://www.gstatic.com/firebasejs/8.7.1/firebase-messaging.js"
);
// I've written all the values below.
firebase.initializeApp({
apiKey: "",
authDomain: ",
databaseURL: ',
projectId: "",
storageBucket: ",
messagingSenderId: "",
appId: "",
measurementId: ""
});
[enter image description here](https://i.stack.imgur.com/vYAtn.png)
const messaging = firebase.messaging();
src / firebaseSDK.js
import firebase from "firebase";
// 아래 값들은 모두 작성하였습니다.
const firebaseConfig ={
apiKey: "",
authDomain: ",
databaseURL: ',
projectId: "",
storageBucket: ",
messagingSenderId: "",
appId: "",
measurementId: ""
};
export const firebaseApp = firebase.initializeApp(firebaseConfig);
-src / app.js
`import React from 'react';
import logo from './logo.svg';
import './App.css';
import { firebaseApp } from "./firebaseSDK";
const firebaseMessaging = firebaseApp.messaging();
firebaseMessaging
.requestPermission()
.then(() => {
return firebaseMessaging.getToken(); // 등록 토큰 받기
})
.then(function (token) {
console.log(token); //토큰 출력
})
.catch(function (error) {
console.log("FCM Error : ", error);
});
firebaseMessaging.onMessage( payload => {
const { title, ...options } = payload.notification;
//Show the notification :)
return navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
registration.showNotification(
title,
options
)});
});
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;`
Replace Firebase v8 -> v9 version and return v8 again
Expecting Web Push from Chrome Browser