能否获取sendBeacon的HTTP请求结果？按需更新sessionStorage时间戳

sendBeacon本身确实只返回请求是否成功排入队列的布尔值，无法直接获取HTTP响应状态。要实现仅在服务器响应成功时更新时间戳的需求，最可行的方案是借助Service Worker拦截beacon请求，获取响应状态后通知主页面执行更新操作，同时保留sendBeacon的优势（比如页面卸载时的可靠发送）。

具体实现步骤 #

1. 注册Service Worker（主页面脚本）

先在你的页面中注册Service Worker，用于后续拦截beacon请求：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      await navigator.serviceWorker.register('/sw.js');
    } catch (err) {
      console.error('Service Worker注册失败:', err);
    }
  });
}

// 监听来自Service Worker的消息，收到成功信号后更新时间戳
navigator.serviceWorker.addEventListener('message', (event) => {
  if (event.data.type === 'BEACON_SUCCESS') {
    sessionStorage.setItem('lastActiveTimestamp', Date.now().toString());
  }
});

// 封装发送beacon的函数
function sendAnalyticsBeacon(data) {
  const beaconUrl = '/api/analytics'; // 替换为你的beacon接口地址
  const isQueued = navigator.sendBeacon(beaconUrl, JSON.stringify(data));
  if (!isQueued) {
    console.error('Beacon请求无法排入队列');
  }
}

2. 编写Service Worker脚本（sw.js）

在Service Worker中监听fetch事件，捕获目标beacon请求并检查响应状态：

self.addEventListener('fetch', (event) => {
  const req = event.request;
  // 仅拦截目标beacon请求（根据接口路径/方法判断）
  if (req.method === 'POST' && req.url.endsWith('/api/analytics')) {
    event.respondWith(
      fetch(req.clone())
        .then(res => {
          // 仅当响应状态为2xx时，通知主页面更新时间戳
          if (res.ok) {
            event.clientId.then(clientId => {
              self.clients.get(clientId).then(client => {
                client?.postMessage({ type: 'BEACON_SUCCESS' });
              });
            });
          }
          // 返回原响应，不影响服务器端的业务处理
          return res;
        })
        .catch(err => {
          console.error('Beacon请求处理异常:', err);
          return err;
        })
    );
  }
});

注意事项 #

• 兼容性：Service Worker需要HTTPS环境（localhost开发环境除外），如果你的网站仍使用HTTP，这个方案无法生效。对于不支持Service Worker的浏览器，可考虑降级为fetch（但会失去sendBeacon在页面卸载时的可靠发送能力），或接受时间戳偶尔不准确的情况。
• 请求匹配：确保Service Worker中的请求判断逻辑（路径、方法）与你的实际beacon请求完全匹配，避免误拦截其他请求。
• 页面卸载场景：Service Worker在页面卸载后仍能完成响应处理，不会影响sendBeacon在页面关闭/刷新时的发送可靠性。

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