Firebase FCM中Service Worker的'notificationclick'事件点击通知时不触发

我之前也碰到过一模一样的问题，折腾了好一会儿才找到几个关键的排查方向，给你整理一下：

1. 先排查最常见的坑：旧Service Worker缓存 #

浏览器对Service Worker的缓存非常“顽固”，很多时候你改了代码，但浏览器还在跑旧版本的SW，新的事件监听根本没生效。解决方法很简单：

• 打开Chrome DevTools（按F12），切换到Application标签页
• 左侧找到Service Workers，勾选「Update on reload」
• 刷新页面，确保新的Service Worker状态显示为「Activated」（如果有旧的SW，点击「Unregister」彻底清除后再刷新）
• 重新触发通知并点击，看控制台是否有输出

2. 调整代码执行顺序，把Firebase初始化放在最前面 #

虽然理论上全局事件监听不受加载顺序影响，但把依赖的脚本加载和初始化逻辑放在事件注册之前，能避免很多潜在的执行队列问题。给你调整后的代码结构：

// 1. 先加载Firebase核心脚本
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');

// 2. 初始化Firebase配置
const firebaseConfig = {
  apiKey: "***",
  authDomain: "***",
  projectId: "***",
  storageBucket: "***",
  messagingSenderId: "***",
  appId: "***",
  measurementId: "***"
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// 3. 注册notificationclick事件监听（放在Firebase初始化之后）
self.addEventListener('notificationclick', function(event) {
  console.log('[firebase-messaging-sw.js] Notification click received.');
  console.log('点击的事件详情:', event); // 多打一行日志，确认事件是否真的触发
  event.notification.close();
  
  const path = event.notification?.data?.url || '/';
  event.waitUntil(
    clients.openWindow(path)
      .catch(err => console.error('打开窗口失败:', err))
  );
});

// 4. 最后处理后台消息推送
messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  const notificationTitle = payload.data?.title || 'New Notification';
  const notificationOptions = {
    body: payload.data?.body || 'You have a new message',
    icon: '/firebase-logo.png',
    badge: '/badge-icon.png',
    data: {
      url: payload.data?.url || '/',
    },
    actions: [
      { action: 'open', title: 'Open App' }
    ]
  };
  self.registration.showNotification(notificationTitle, notificationOptions);
});

3. 检查通知点击的触发范围 #

你给通知加了actions按钮，要注意：

• 点击通知主体区域和点击action按钮都会触发notificationclick事件
• 可以在事件监听里加一行日志，确认点击的是哪个部分：

  console.log('点击的Action类型:', event.action); // 点击主体会输出空字符串，点击按钮会输出"open"
  

另外，确保你前端页面的messaging.onMessage逻辑没有覆盖后台通知的点击处理（不过后台通知本来就由SW处理，一般不会冲突）。

4. 验证Service Worker的作用域与URL匹配 #

如果你的SW不是放在根目录，或者注册时指定了非根路径的作用域，通知里data.url的路径必须在SW的控制范围内，否则事件可能无法触发。前端注册SW时尽量显式指定根作用域：

// 前端页面注册SW的代码（如果有的话）
navigator.serviceWorker.register('/firebase-messaging-sw.js', {
  scope: '/' // 确保SW能控制所有页面路径
});

最后测试小技巧 #

用Firebase控制台发送测试消息时，一定要选「自定义数据」，手动填title、body、url这几个字段，不要用默认的「通知」模板——因为模板消息的字段结构和你代码里处理的payload.data不匹配，可能导致通知显示正常，但点击逻辑拿不到正确的路径。

内容来源于stack exchange