You create a website.
It contains 2 text fields, with a single digit number each.
When the user changes the value of a text field, the client transmits the number to a server, asynchronously. No further interaction with the user is required.
As most visitors of the website are mobile users, the client must be able to deal with going offline. When the client comes back online, the values that have not been transmitted so far need to be transmitted.
Optional extra: showing a check mark next to the text field, for successful transmission to the server.
What would be the simplest solution, given you can use only HTML and JavaScript (and JavaScript libraries/frameworks)?
Top comments (12)
Vanilla JS: use localStorage to keep the values (in order they were typed), and check when connections is online send the events from the queue. (local storage or indexedDB).
Any offline capable framework like Google Firestore, AWS APPSync ....
This sounds like a great use for Pusher!
I'm a little confused by the problem being posed. Do you need to give the user a confirmation that the async task finished?
What I meant In the optional extra: give the user confirmation that the server actually received the data.
So sending is one thing and sufficient in terms of the challenge.
Confirmation of reception by the server would be the cherry on top. Does that help?
In more technical terms: setting the check box as a reaction to a HTTP status ok response from the server qualifies for the optional extra.
A solution can be found here:
github.com/david-szabo97/devto-cha...
Tried it today on a train ride. Works fine :)
Fantastic. I will try it out.
You might take a look at PouchDB
App cache, service worker, local storage and Ajax call. I would stick to plain JavaScript.
This is nice question.
Pls, read this github.com/logux
Who’s going to be the heroIne who posts code?