reload - Web App in Flaky Internet connection -

have php/mysql/js-jquery based web site records finish times racers, sends time server. server inserts finish time in db, calculates finish place based on handicapping formula. stores , send finish place web page , updated on screen. uses jquery ajax calls page doesn't reloaded @ all. works fine if data connection good.

if data connection bad first version of page put message connection bad. trying make bit smarter, have started html5 feature tells browser if on or offline(i realize may not best way yet works concept testing) when new finish time recorded(or updated) , offline js adds class of notsent tag of finish time. finish place , of finish places come sever greyed out indicating data no longer valid(until can communicate server).

when browser finds online, simple jquery each loop on each notsent class starts re-sending ajax requests , if completed processes return finish place information , display date.

it disables external links on page when browser offline. keeps user losing data entry page accident clicking link give them page not found button.

so last issue, browsers reload , close buttons, if user click these when offline lose data entry screen , out of luck until connection comes back. can disable these functions well? quick stack-overflow search of indicates can done answers give old, "you shouldn't , if think need should rethink design." warning.

so rethinking design start learning about;

• html 5 local storage (decide don't need it, since data stored in input box)
• app-cache manifest controlling cache of page if reloaded in browser off line if cached version. after reading came conclusion work on static page not mine data updated time. found browsers deprecating anyways.
• service workers seems possible future contorlling offline caching, not browsers support it, pretty cumbersome learn , still new.

now stuck, leaning towards preventing browser reloads , defering learning service worker till more support , better examples dynamic content pages mine.

bottom line- missing here? there easy solution?

i think best option use pouchdb sync between client , server , use background sync awake service worker when regain connectivity. if service worker not present in browser, can sync next time user open browser.

you have similar example of deferred requests explained in service worker cookbook,