浏览器推送通知点击跳转动态URL问题求助

云上老周

2026-5-20

解决点击推送通知跳转动态URL的问题

你已经搞定了推送通知的接收逻辑，但确实没加通知点击事件的处理代码，这就是没法跳转的核心原因。咱们一步步来修复：

1. 先把推送数据改成JSON格式（更灵活）

建议不要用纯文本传数据，改成JSON可以同时携带通知内容和跳转URL，比如推送的JSON结构可以是这样：

{
  "title": "Garment IO",
  "body": "你的具体通知内容",
  "url": "/pages/order-detail/123" // 动态生成的跳转路径
}

2. 更新Service Worker代码

修改push事件处理逻辑来解析JSON数据，同时把跳转URL存在通知的data字段里；再新增notificationclick事件监听，处理点击跳转：

self.addEventListener('push', function(event) { 
  console.log('[Service Worker] Push Received.'); 
  // 解析推送的JSON数据
  const pushData = event.data.json();
  console.log(`[Service Worker] Push data:`, pushData); 

  const title = pushData.title || 'Garment IO'; 
  const options = { 
    body: pushData.body, 
    icon: '../images/icon.png', 
    dir:'rtl', 
    badge: '../images/badge.png', // 补全你的badge图片路径
    // 把跳转URL存在通知的data属性里，方便点击时获取
    data: {
      targetUrl: pushData.url
    }
  }; 

  // 调用showNotification显示通知，用waitUntil确保异步操作完成
  event.waitUntil(
    self.registration.showNotification(title, options)
  );
});

// 新增通知点击事件监听
self.addEventListener('notificationclick', function(event) {
  console.log('[Service Worker] Notification clicked.');
  
  // 先关闭点击的通知
  event.notification.close();

  // 跳转到指定的动态URL
  event.waitUntil(
    clients.openWindow(event.notification.data.targetUrl)
  );
});