Offline-Friendly Forms

https://mxb.at/blog/offline-forms/

by mxbck • 9 years ago

236 63 9 years ago

mxb.at

Numberwang• 9 years ago

This is amazingly useful.

FLUX-YOU3• 9 years ago

Be careful with sensitive information (not just passwords):

https://stackoverflow.com/questions/7859972/storing-credenti...

Not storing that kind of stuff will need prompts to re-enter it too.

swellep3• 9 years ago

If you delete it as soon as the user comes online, wouldn't their information be safe? No one else would've been able to get the information because they were offline, right? And so it's not still saved if the user exits the webpage before they return online, you can use SessionStorage.

tehlike3• 9 years ago

No. They can copy the data to another location to send later.

FLUX-YOU3• 9 years ago

It's more that you put the password on the disk in unencrypted format without telling the user. For instance, chrome stores them in sqlite databases which you can just open and select from:

http://i.imgur.com/zauv4sK.png

Your disk could be encrypted, but not everyone's will be. It's better to just localStorage as it was intended.

Plus if you introduce a bug later down the line, you might not prune older localStorage entries, meaning they will stay there for much longer than you want. AND the user may not revisit your site ever again after going offline, which doesn't give you an opportunity to prune it.

tskaiser• 9 years ago

Any situation where a password is persisted, especially in plaintext, can present a security risk. It is one of those things where you don't just guess that it is "safe enough" unless you have thoroughly proven it to be so.

tmaly• 9 years ago

This is a super useful concept, thanks for sharing this.

vinnymac2• 9 years ago

Improving UX is important here, but keep in mind `navigator.onLine` is prone to false positives when it returns true in Chrome and Safari.

https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOn...

If you need to support more browsers it isn't difficult. Just make a request to a small static asset or a health route and keep track of the online status yourself. You could even combine this with `navigator.onLine` for the best of both worlds.

ishitatsuyuki• 9 years ago

I would just submit the form and check if it had a successful response. It can still be unreliable on a flaky network (the exactly once issue), but anyway it's cheaper on resources.

vinnymac2• 9 years ago

Yea, I would do the same. I was just speaking in terms of online awareness.

gramstrong• 9 years ago

Is listening for the event really expensive? Honest question. We update the UI when it happens, so I don't think relying on the success/failure of network requests is reasonable for us anyways.

Brakenshire3• 9 years ago

It's a shame the API's aren't better for this situation, pinging a static asset to determine network status is not good for battery life on smartphones if it's going to occur for any length of time.

devdad• 9 years ago

Do you have any information to support this claim about battery drain? Genuinely interested, not trying to negate what you're saying.

ivan_gammel• 9 years ago

It also badly impacts UX, because on slow networks the request-response roundtrip even for small static asset may be very long, so that the time needed for the feedback in the form will be in fact doubled.

devrandomguy• 9 years ago

The real problem is that there is no way to reliably know just how far your connection goes, without pinging. You might be able to connect to URLs on a university WAN, but not to the rest of the internet, for example. In this situation, as far as uni websites are concerned, you are online, but for Youtube, you are effectively offline. The concept of "online" does not have a trivial boolean definition.

agentultra2• 9 years ago

You could also use caching headers to know whether the client is about to update an object older than the current on on the server in the case where the form is being used to "edit" an object. Hopefully the server would respond to the If-None-Match header with the object version and give you a 304: Not Modified response... yay, you're free to upload the data! Otherwise you might want to notify the user that their changes are out-dated when the server returns the newer version of the object.

nfriedly2• 9 years ago

How did I not know about navigator.onLine and the online/offline events!? Before reading this, I figured that would be the hardest part.

dspillett• 9 years ago

If a user is currently offline, we’ll hold off submitting the form for now

Be careful not to completely rely on navigator.onLine for this as your next request could be the first to fail, so you need to deal with submission errors and timeouts too (or safer: always put the data in local storage and remove once you have confirmation of a successful save).

The article seems good overall though, I can forgive leaving out some of the nitty-gritty like this to keep the main points clear.

hire_charts• 9 years ago

On top of that, I'd consider adding a bit of idempotency to the form submission -- to make sure that if the request did in fact succeed even though you did not get the confirmation of a success, subsequent retry/resubmit attempts won't result in duplicate entries.

A rough way to do this would be to add a hidden UUID value in the form data that is generated once up front and used by both the client and the server to ensure that the result of the first successful request can be cached and re-returned.

agentultra2• 9 years ago

The approach of using versioned objects with Etag/If-None-Match and appropriate responses works rather well: http://www.clairereynaud.net/blog/adding-offline-mode-to-you...

nfriedly2• 9 years ago

Agreed, although if you look at the code, they do in fact do that - it's only removed from localStorage after receiving a 200 status response. Any other status code will leave the data in localStorage and display an error message.

marksomnian2• 9 years ago

The problem then becomes what happens when the server receives the request, processes and stores the data, but loses connection before the client can receive the 200. In this case, the client will assume the submission failed and will retry the submission - creating two records.

TomMarius2• 9 years ago

Another pitfall is that navigator.onLine can be true even though the device has no access to the Internet.

kenrick95• 9 years ago

I'm actually expecting a Service Worker solution using Background Sync feature, like the description of the problem in this article: https://developers.google.com/web/updates/2015/12/background...

Brakenshire3• 9 years ago

Seems to have already shipped in Chrome. And making progress on Firefox:

https://bugzilla.mozilla.org/show_bug.cgi?id=1217544

cagmz• 9 years ago

If you dont want to use ajax to send your form submission, another solution would be to just repopulate the form fields with the stored data, then calling form.submit()

What are the pros and cons between these 2 approaches?

jbob20002• 9 years ago

It mostly depends on the server receiving the form submission. If your server is setup to receive form posts, constructing a form post in javascript would be really cumbersome, so just repopulating the form and resubmitting would be the easiest. But if your server handles JSON, you can just take your stored data and post it right to the server.

wongarsu3• 9 years ago

Using jquery, the following looks exactly like the submitted form to the server side:

    $.ajax({
           type: "POST",
           url: url,
           data: $("#form").serialize(), // serializes the form's elements.
           success: function(data)
           {
               //do stuff
           }
    });

Instead of serializing the form, jquery can also just serialize a flat js object. I wouldn't call that complicated enough to make a distinction. (it's probably really easy in modern plain js too)

noiv• 9 years ago

window.addEventListener('online', () => this.checkStorage());

Every time I see this double function safety pattern a small part of my JS heart dies.

allover3• 9 years ago

Eh, you prefer using bind() or something? Because that still creates another function.

wongarsu3• 9 years ago

What's the better alternative?

reificator• 9 years ago

If I understand their concerns correctly, they would prefer this:

window.addEventListener('online', this.checkStorage);

TomMarius2• 9 years ago

Using bind and saving a reference to the bound function one level up, not creating a new one each time

imtringued• 9 years ago

How do you signal to the user when the form has been commited to a server? Would you have to create a queue view that shows all the pending modifications and send push notifications when an item in the queue has been committed?

aamederen• 9 years ago

As a user, instead of the "we will send the data once you are online" message, I would prefer "you seem offline, please try again once you are online" kind of approach. I would not like to rely on a background worker on a mobile device and I would not know whether my form has been sent, a timeout occured, what happens if I refresh the tab, what happens in a poor connection (seems online but can't connect to internet). Therefore, I would like to be just notified about the connection issue and try again once I got out of the metro.

askvictor• 9 years ago

If this tied into the platforms' notification systems, it could get around that; a notification appears for an unsubmitted form, and hangs around until it has successfully gone through, possibly with another notification of success, or failure after a certain timeout.

megamindbrian• 9 years ago

Ok, let me just open up my developer console using F12 and check the Offline box on the network panel. So glad I took the extra 20 seconds to do that before reading part of the article and navigating away from this "distraction".

Offline-Friendly Forms

Related Stories