Firebase 推送通知未弹出

Question

我成功注册了 Firebase Service Worker

let messaging = null;
export const registerFirebaseServiceWorker = () => {
  if ("serviceWorker" in navigator) {
     console.log("serviceWorker in navigator");
     navigator.serviceWorker.register(("./firebase-messaging-sw.js"))
         .then((registration) => {
           console.log("Registration successful, scope is: ", registration.scope);
         })
  }
}

并尝试使用 messaging.onMessage 回调接收消息

    if (supportsWebPush) {
                    messaging.onMessage(payload => {
                        console.log("There's a message!", payload);
    
                        const notificationTitle = "notificationTitle"
                        const notificationOptions = {
                            body: payload
                        };
    
                        //self.registration.showNotification(notificationTitle, notificationOptions);
    
                        navigator.serviceWorker.getRegistration("./firebase-messaging-sw.js").then(registration => {
                            console.log("got the registration");
                            registration.showNotification('Hello world!');
                        }).catch(error => {
                            console.log("No service worker registered", error);
                        });
    
                    });

即使console.log 正在运行并且registration.showNotification 被执行，我的浏览器上也没有推送通知？为什么是这样？我一直在尝试多种不同的方法并搜索了许多可疑的问题，但找不到显示默认网络推送弹出窗口的正确方法