有一个基于PHP/mySQL/JS-JQuery的网站记录完赛时间，然后将时间发送回服务器。服务器在数据库中插入完赛时间，根据一个差点公式计算完赛时间。存储并将完成位置发送回网页，并在屏幕上更新。它使用Jquery Ajax调用，所以页面根本不会被重新加载。如果数据连接良好，一切都可以正常工作。
如果数据连接是坏的，我的第一个版本的这个页面会把一个消息，连接是坏的。现在我想让它更聪明一点，所以我开始使用HTML5功能，告诉浏览器它是在线还是离线(我意识到这可能不是最好的方法，但它适用于概念测试)。当一个新的完成时间被记录(或更新)并且我们处于脱机状态时，JS只是向完成时间的标签添加一个notSent类。完成位置和所有通常来自服务器的完成位置都显示为灰色，表明数据不再有效(直到它可以与服务器通信)。
当浏览器发现自己重新联机时，每个notSent类上的一个简单的jQuery each循环开始重新发送AJAX请求，如果它们都完成了，它处理返回的finish place信息并将其显示为最新的
当浏览器离线时，它还禁用页面上的所有外部链接。这可以防止用户因点击链接而丢失数据输入页面，该链接会给他们一个未找到页面的按钮。
所以我的最后一个问题，是浏览器重新加载和关闭按钮，如果用户在离线时单击这些按钮，他们将失去数据输入屏幕，并且在连接恢复之前运气不好。我也可以禁用这些功能吗?快速搜索一下这个问题，你会发现这是可以做到的，但大多数答案都是"你真的不应该这样做，如果你认为你需要这样做，你应该重新考虑你的设计。"
警告。所以重新思考我的设计，我开始学习;
- HTML 5本地存储(决定我不需要它，因为我的数据已经存储在输入框中)
- App-cache Manifest用于控制页面的缓存，因此如果在浏览器中离线重新加载，它将获得缓存的版本。经过大量阅读得出的结论是，这可以在静态页面上工作，但不是我的数据一直在更新。然后发现大多数浏览器都不赞成这个。 Service Workers似乎是控制离线缓存的可能未来，但并不是所有的浏览器都支持它，学习起来很麻烦，而且还是很新的。
现在我卡住了，倾向于防止浏览器重新加载和推迟学习service worker，直到更多的支持和更好的例子，像我的动态内容页面。
底线-我在这里错过了什么?有简单的解决办法吗?
我认为最好的选择是使用PouchDB在客户端和服务器之间同步，并在恢复连接时使用后台同步来唤醒Service Worker。如果你的浏览器中没有Service Worker，它可以在你的用户下次打开浏览器时同步。
在Service Worker Cookbook中有一个类似的延迟请求示例，