Firebase Web通知请求成功但未收到，求助排查问题

从你的请求和响应来看，FCM已经成功把消息推送到了Google的服务器，但Chrome没有显示通知，大概率是以下几个原因之一，你可以逐一排查：

1. 缺少Service Worker的配置 #

Chrome浏览器接收FCM后台通知必须依赖Service Worker，如果只是在页面里获取了Instance ID Token，但没有注册并配置对应的Service Worker，通知根本无法在后台弹出。

你需要做这些操作：

• 在项目根目录创建firebase-messaging-sw.js文件，文件里需要初始化Firebase并监听后台消息事件：

  importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
  importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');
  
  firebase.initializeApp({
    // 替换成你的Firebase项目配置
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  });
  
  const messaging = firebase.messaging();
  
  // 监听后台消息，手动显示通知
  messaging.onBackgroundMessage(function(payload) {
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
      body: payload.notification.body,
      icon: '/your-notification-icon.png', // 可选，设置通知图标
      click_action: payload.notification.click_action
    };
  
    return self.registration.showNotification(notificationTitle, notificationOptions);
  });
  
  // 处理通知点击事件
  self.addEventListener('notificationclick', function(event) {
    event.notification.close();
    event.waitUntil(
      clients.openWindow(event.notification.click_action)
    );
  });
  

• 在你的HTML页面中注册这个Service Worker，并关联到Firebase Messaging：

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/firebase-messaging-sw.js')
      .then(function(registration) {
        console.log('Service Worker 注册成功:', registration);
        const messaging = firebase.messaging();
        messaging.useServiceWorker(registration);
      })
      .catch(function(err) {
        console.error('Service Worker 注册失败:', err);
      });
  }
  

2. 页面处于活跃状态时未处理前台消息 #

如果你的HTML页面当前是打开且处于活跃标签页的状态，FCM的notification字段不会自动弹出通知，需要你在页面中监听onMessage事件手动处理：

const messaging = firebase.messaging();
messaging.onMessage(function(payload) {
  console.log('收到前台消息:', payload);
  // 手动创建通知
  const notification = new Notification(payload.notification.title, {
    body: payload.notification.body,
    icon: '/your-notification-icon.png'
  });
  // 处理通知点击
  notification.onclick = function() {
    window.open(payload.notification.click_action);
  };
});

可以试试把页面标签页切换到后台，再重新发送通知测试。

3. 通知权限未正确授予或已被取消 #

虽然你调用了获取权限的代码，但可能后续权限被用户取消了。你可以打开Chrome的chrome://settings/content/notifications页面，检查你的网站是否在"允许发送通知"的列表里。

4. click_action字段的潜在问题 #

确保click_action是完整的、可访问的URL，并且和你的网站域名匹配（如果是跳转到外部域名也没问题，但要确保URL正确）。另外在Service Worker的notificationclick事件里，要正确处理跳转逻辑，避免点击通知后无响应。

内容的提问来源于stack exchange，提问作者albaserver