Question

我正在开发一个Web应用程序，其中用户正在编辑共享资源。您可以将Wikipedia文章或Stack Overflow帖子视为可编辑共享资源的有效示例。

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

问题在于，当用户关闭浏览器时，“离开站点？”对话框弹出，用户可以选择离开还是停留。这是一个问题，因为从某个版本的Google Chrome浏览器开始，我无法确定用户是决定留下还是离开，因此我不知道我是否应该真正解锁资源。

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

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

Answer 1

如果您的用户实际上离开页面，则会触发卸载事件。如果他们取消对话框，则不会触发 unload 事件。您可以使用您的 unload 事件通过sending a beacon来解锁资源：

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

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