Web Push通知开发求助：跨事件监听器传递URL（无需二次fetch）

嘿，我来帮你搞定这个困扰！你现在的问题核心是push事件里拿到的URL没法在notificationclick事件里直接复用，又不想二次请求接口对吧？其实最简单的办法就是在创建通知的时候把URL打包到通知的自定义数据里，这样点击的时候直接从通知对象里取就行，完全不用再调用fetch。

具体实现步骤 #

1. 在Push事件中把URL附加到通知的data字段 #

修改你获取通知数据并显示通知的代码，把notif_url放到通知选项的data属性里：

self.addEventListener('push', function(event) {
  event.waitUntil(
    fetch('notification.php')
      .then(function(response) {
        // 假设你的接口返回JSON格式数据，包含body、icon、url等字段
        return response.json();
      })
      .then(function(notificationData) {
        const notificationOptions = {
          body: notificationData.body,
          icon: notificationData.icon,
          // 关键：把需要的URL存入data字段，这里可以放任意自定义数据
          data: {
            targetUrl: notificationData.notif_url
          }
        };
        
        return self.registration.showNotification('你的通知标题', notificationOptions);
      })
  );
});

2. 在NotificationClick事件中读取URL并跳转 #

点击通知的时候，直接从event.notification.data里取出之前存储的URL，然后打开对应页面：

self.addEventListener('notificationclick', function(event) {
  // 先关闭弹出的通知
  event.notification.close();
  
  // 从通知的data字段里获取目标URL
  const targetUrl = event.notification.data.targetUrl;
  
  // 打开对应的页面，用waitUntil确保操作完成
  event.waitUntil(
    clients.openWindow(targetUrl)
  );
});

额外说明 #

• 这个方法的优势在于只请求一次接口，所有需要的数据在push事件里一次性获取并绑定到通知上，完全避免了二次请求的开销。
• 通知的data字段支持存储任意JSON可序列化的数据，除了URL，你还可以放其他需要的自定义信息（比如通知ID、分类等）。
• 如果你的接口返回的不是JSON格式，比如纯文本或其他格式，只需要调整数据解析的逻辑，核心思路还是把URL存入data字段。

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