Firebase+PHP推送通知点击无响应求助：需跳转至对应内容页

看起来你的推送通知能正常显示，但点击没反应，核心原因是没有配置通知的点击事件处理逻辑——不管网页处于前台还是后台/锁屏状态，都需要对应的代码来监听点击动作并完成跳转。下面分场景给你具体的解决方案：

1. 处理前台状态下的通知点击 #

当用户正在浏览你的网页（前台状态）时，FCM不会自动弹出系统通知，需要你通过onMessage事件自定义通知，并添加点击跳转逻辑。在你的现有代码中补充以下内容：

// 监听前台收到通知的事件
messaging.onMessage((payload) => {
  console.log('前台收到通知:', payload);
  // 自定义通知的显示内容
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/path-to-your-notification-icon.png', // 替换成你的通知图标路径
    data: payload.data // 携带跳转URL等关键数据
  };

  // 弹出自定义通知
  const notification = new Notification(notificationTitle, notificationOptions);
  
  // 给通知添加点击跳转逻辑
  notification.onclick = (event) => {
    event.preventDefault(); // 阻止默认行为
    // 跳转到指定内容页，这里从payload的data字段取目标URL
    window.open(payload.data.target_url, '_blank');
    notification.close(); // 点击后关闭通知
  };
});

2. 处理后台/锁屏状态下的通知点击 #

当网页在后台运行或用户锁屏时，通知由系统直接弹出，这时候需要在Service Worker中处理notificationclick事件。步骤如下：

第一步：创建/修改Service Worker文件 #

在项目根目录下创建（或修改）firebase-messaging-sw.js文件，添加以下代码：

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，和你前端的配置保持一致
const firebaseConfig = {
  apiKey: "AIzaSyAXavmNUsgT7UgRIQEdweFXIhBrYTGPvOY",
  authDomain: "tech-miz.firebaseapp.com",
  databaseURL: "https://tech-miz.firebaseio.com",
  projectId: "tech-miz",
  storageBucket: "tech-miz.appspot.com",
  messagingSenderId: "942114086591"
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// 监听后台收到通知的事件（可选，用来自定义通知显示）
messaging.onBackgroundMessage((payload) => {
  console.log('后台收到通知:', payload);
});

// 处理通知点击事件
self.addEventListener('notificationclick', (event) => {
  event.notification.close(); // 点击后关闭通知
  // 跳转到指定内容页，从通知的data字段获取目标URL
  event.waitUntil(
    clients.openWindow(event.notification.data.target_url)
  );
});

第二步：在前端代码中注册Service Worker #

如果你的代码还没注册Service Worker，补充以下逻辑：

// 注册Service Worker，确保FCM能在后台处理通知
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/firebase-messaging-sw.js')
      .then((registration) => {
        console.log('Service Worker 注册成功:', registration.scope);
        // 将注册对象绑定到messaging
        messaging.useServiceWorker(registration);
      })
      .catch((err) => {
        console.log('Service Worker 注册失败:', err);
      });
  });
}

3. 后台PHP推送的Payload配置 #

这是最关键的一步：你在PHP端发送推送请求给FCM时，必须在Payload中加入**data字段**，用来传递跳转的目标URL。示例PHP请求Body如下：

$payload = [
  'to' => $device_token, // 目标设备的Token
  'notification' => [
    'title' => '新内容通知',
    'body' => '点击查看最新文章',
    'icon' => '/path-to-notification-icon.png'
  ],
  'data' => [
    'target_url' => 'https://your-domain.com/blog/post/123' // 替换成你要跳转的内容页URL
  ]
];

注意：如果只传递notification字段，后台状态下点击通知无法触发自定义跳转，必须配合data字段传递跳转信息，这样Service Worker才能拿到目标URL并完成跳转。

最后检查点 #

• 确保Service Worker文件放在项目根目录，路径正确
• 测试环境需为HTTPS（本地开发用localhost例外）
• 测试时关闭网页后台，再发送推送验证跳转逻辑

这样修改后，不管是前台还是后台状态，点击通知都能跳转到你指定的内容页面了。

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