Firefox中关闭浏览器时visibilitychange事件未触发问题

问题情况 #

要在浏览器关闭时发送分析数据，用visibilitychange事件搭配navigator.sendBeacon()实现的代码在Chrome里正常运行，但Firefox关闭浏览器时，这个事件监听器完全没触发。按相关文档说明，该事件本应在浏览器关闭时触发。

用到的代码如下：

document.addEventListener('visibilitychange', () => {
  if(document.visibilityState === 'hidden') {
    navigator.sendBeacon('http://localhost:3001')
  }
})

解决思路与代码 #

Firefox在处理浏览器/标签页关闭动作时，visibilitychange事件的触发存在兼容性问题，这时候可以结合pagehide事件来覆盖这个场景，同时保留visibilitychange处理切换标签等其他页面隐藏的情况：

function sendAnalytics() {
  if (document.visibilityState === 'hidden' || event.type === 'pagehide') {
    navigator.sendBeacon('http://localhost:3001');
  }
}

document.addEventListener('visibilitychange', sendAnalytics);
document.addEventListener('pagehide', sendAnalytics);

额外注意事项：

• pagehide事件在页面卸载（包括关闭标签、浏览器）时会触发，Firefox对该事件的支持更稳定
• 避免使用beforeunload事件，它会干扰用户关闭页面的操作，而且sendBeacon在该事件中的执行也不可靠
• 如果请求是跨域的，要确保目标服务器配置了正确的CORS规则，防止请求失败

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