弄清楚用户是否真的关闭了浏览器



我正在开发一个用户正在编辑共享资源的 Web 应用程序。您可以将维基百科文章或堆栈溢出帖子视为可编辑共享资源的工作示例。

由于用户往往不经常保存他们的工作,因此存在一个问题,即多个用户可以干扰彼此对同一资源的编辑。为了解决这个问题,我正在实现一种锁定机制,在这种机制中,每当用户开始编辑资源时,资源就会被锁定,这意味着其他用户在用户保存其工作之前无法编辑该资源。也就是说,要解锁资源,用户必须保存或退出浏览器,在这种情况下,他的编辑将被关闭。

问题是,当用户关闭浏览器时,会弹出一个"离开网站?"对话框,用户可以选择是离开还是留下。这是一个问题,因为从某个版本的谷歌浏览器开始,我无法判断用户是决定留下还是离开,因此我不知道我是否真的应该解锁资源。

在旧版本的Chrome中,我可以做的是用自定义对话框覆盖默认对话框,在该对话框中,我可以根据用户是选择留下还是离开来实现不同的行为。不幸的是,我无法为当前版本的 Chrome 执行此操作,因为用于启用此选项的功能已弃用。

有没有办法区分用户选择离开的情况和他选择留下的情况?或者,是否有更好的方法来实现锁定机制,以便在用户关闭浏览器时自动解锁资源?

如果用户实际离开页面,将触发卸载事件。 如果他们取消对话框,则不会触发卸载事件。 您可以使用卸载事件通过发送信标来解锁资源:

window.onunload = function () {
navigator.sendBeacon('/api/unlockResource/12345');
};

不幸的是,移动Safari还不支持信标,只有最新版本的Edge和桌面Safari支持,因此如果您需要额外的支持,您可能需要尝试XMLHttpRequest找到解决方法。 例如,您可以将fetch()请求与keepalive: true一起使用,但我无法确认移动 Safari 是否支持它。

最新更新