I have an html5 application. It sends stuff to a database. Originally I was doing the database update instantly, however, now I am allowing for offline usage, and instead letting the user choose when to send to the database. (Eg if they are on a plane, they might want to do it later.)
So, now the problem is, if they shutdown, I want to warn them before they do, if they have failed to send any unsent data and allow them to return to send it if necessary. I will ultimately be using local storage until it is sent, so it wont be lost, but the important thing is to let the user know it is as yet unsent.
I will have a global g_bUnsentData = true; if there is unsent data.
Can this be done in javascript, and how can you do it?
Also, as an aside, how do I test for online status, so I can warn the user if they are offline and trying to send data?
See #SmartK8's comment.
Nonetheless, if you bind a function to the beforeunload event that returns a string, most browsers will display that string and a confirmation to leave the page. For example:
Some browsers might not display your returned string in the confirmation at all. Other browsers, especially mobile ones, will not even prevent the page from being navigated away from.
For testing the online status, navigator.onLine is a boolean value indicating network availability. It's not available everywhere (Opera, Firefox), but it's a start. See this page at html5 rocks for more details.
Related
I have made a laravel 5.2 app which records transaction of a warehouse .. now my client wants me to give a feature which will prevent his employees from closing the browser.I know it is possible in desktop apps.My client wants to prevent his employees from stealing the money by not saving the transaction. Is there any way i can prevent the user from not being able to close the browser/window or can i record everything if someone closes the browser/tab/window without clicking save button (to catch the criminal :D)
No, you cannot prevent the user from closing the browser from via your web site, neiter from server, nor from client side. Special software installed on the computer may make it possible, but the employer could e.g. simply kill the browser process.
One workaround that would make data loss less likely (though not impossible) would be to automatically save the data every time the user changes anything on the front end, e.g. via XMLHttpRequests.
In any case, you have to ensure in the backend (which is not in the control of the end user), that only complete and valid transactions are being saved and incomplete transactions are discarded. By doing this, the issue you are describing should be completely avoidable.
It is also very simple to check if a transaction was completed or not and who worked on it.
The moment, the employee logs in or starts a new transaction, a flag is set, which indicates an unfinished transaction. This event is also documented in a log. When the transaction is finished correctly, the flag is removed and another logentry is created. If not, there are irregularities visible in the log.
In this way, it is also possible to set a time limit for the duration of an transaction.
This question has cropped up a few times in various guises, but I've not seen an answer that satisfies my requirement or fills me with much confidence. Let me set the scene.
We currently have a web application, which allows users to submit responses to pre-set questions where the data ends up in an SQL Server database, we also have a Windows application that does the same thing but works in an offline capacity; i.e. it connects to the SQL Server, downloads the questions, allows the user to complete them offline and when they next have a network connection they can synchronise the data, uploading it to the SQL Server. Great!
As part of our development strategy, given HTML 5's offline capabilities and local storage,it seems perfectly sensible to attempt to consolidate these products into a single web application. This would mean we're able to work on a single code base, and this would also enable the application to run in a browser on most devices; platform independent.
Looking into this I see a couple of potential problems, I'd really appreciate a steer on these:
Users need the ability to login, in offline and on-line modes. This could mean we download the hash's of the all users usernames and passwords, or just those that have logged in whilst in on-line mode. However, even doing this there needs to be a way to check these and given that the Javascript is readable someone could easily reverse engineer their credentials. Yes you can obfuscate the code but this isn't infallible.
The data that needs to be stored locally could be highly sensitive; contain personal information etc. Therefore this also needs encrypting, at minimum AES 256.
Am I hoping for utopia? Is this something that's just not possible at this time? Do I need to be looking at another solution and dismissing this for the time being?
Any help from you lovely people would be much appreciated.
First the easier question 2: that is perfectly possible. You can generate the key on the device and on sync send it via https to your server which can decrypt the data then.
As for question 1 I'd say an offline login is not really feasible BUT do you actually need one? Once the questionaire is downloaded (which requires online mode, so requiring login is fine) you only need to transmit it on sync, where online is again required and you can ask the user for his login there, too. I'd not recommend to download any sensible user data (e.g. hashes) to the device.
What you can do is to cache the current user only after logging in online. This would mitigate the risk of enumerating the users in your local DB.
You then need to encrypt the user's data on the front-end, I'd go with a library that does the job for you (for example, RxDB). RxDB accepts a password (which you can generate on the fly) and based on it, encrypts your DB data. The user then fills in the form (does whatever he wants) and if all of the sudden the internet is gone, the user is still able to continue his work and that work must be added as pending requests in order to do the sync. (which you already have)
When the internet is restored, you're going to check whether the session has expired for the user and if so, prompt the user to log in again and do the sync if it was the same user. If it's still there, perform the sync.
My advice based on my personal experience for the offline part.
You can create a local variable that allows the user to login once using internet for the first time then he will be able to auto login for several times as much as you decided in the local variable and when the value is 0 he will need an internet again to get another offline access for the same value you decided before.
so, in a small words. offline counter that will need an internet Only after many offline logins (when the counter decrease to 0)
Flowcharts
I was wondering how to reproduce the feature which is visible even on the StackOverflow page: when a user edits an answer for other users appear: "an edit has been made to this post; click to load". This is the functionality I am referring to:
https://meta.stackexchange.com/questions/125677/new-feature-real-time-updates-to-questions-answers-and-inbox
Basically, I have a function which takes some time to return the value, and once it happens I would like to update UI.
As they say in the post you are linking, only browsers that supports web sockets can use this feature. Read up on those, they are not too hard to use. It basically it enables the server to "push" data to the client. Be aware though that most servers doesn't support web sockets without extensions at the moment. Neither does all browsers.
Another solution would be to utilize an AJAX request, with setInterval or setTimeout, checking to see if new posts have arrived each i.e. 10th second. This will generate more http requests, but it should be more compatible. Also, it isn't true real time.
I have an application that 99% of the time functions correctly. It's a relatively simple checkout system - the user submits a form, it runs through validation (all fields contain something), then fires against a payment processor. The payment processor uses an API to process the order and returns error or success responses, error returning a message, success passing the user to a 'Thank You' page with the order information.
The problem we're having is we're hearing about customers who say that when it starts processing a message appears (it's supposed to) in an overlay, then just hangs there. I've coded in a timeout which is supposed to wait 25 seconds, then send the user to the success page (minus any success information) which then tells them there was an error. However, in a small number of instances this is not happening.
I've tested this on the gauntlet of browsers and cannot replicate it, so I'm wondering...
If it's possible that a toolbar or plugin on the browser could be preventing the scripts from running correctly.
If there's some way I can programatically check for errors like this and push the user on regardless.
Here's the code for reference: http://jsfiddle.net/XaP7z/
I know this is a long-winded and somewhat vague question but I'm grasping at straws and the client is not happy (regardless of this being a <1% issue).
Is there any way to detect when a user leaves a page, no matter if it's by closing the browser, entering a new URL in the address bar, clicking on a link that redirects to other domain, etc. ?
The main purpose of this would be to perform some activities such as:
sync with the server some data that resides in the client side
clear server session
I was trying with the window's unload and beforeunload events, and reading other questions like:
Best way to detect when a user leaves a web page?
//
Is there any way to know that user leaving a page with asp.net? but I didn't find the answer I would expect.
Here is a simplified js snippet to understand what I was trying:
window.onunload = function(){
if (theConditionThatINeed){
doThings();
SyncWithServerAndAbandonSession(url, localObjects);
}
else {
doNothing();
}
}
I don't want to display any kind of confirmation before the user leaves, so I think that the onbeforeunload won't help me here.
Supposing that the answer is "there is no way to do such thing", what would be the recommended practice to accomplish the synchronization and session clearing that I want?
The primary browser that I support is IE >= 7
As you already read, it is not reliably possible to detect whether the user leaves your page.
Generally it is not good practice to store any unsynced state on the client side. Browsers are easily closed or crashed.
You can send yourself ajax keepalive messages via javascript, in case the user does anything on your page. Again, very unreliable, wasteful and hacky.
Auto-Sync after a short timeout.
Take a look at RESTful web applications. The concept is interesting, and, very superficially spoken, discourages keeping state information on the server. You can apply this to the client as well.
This usually results in keeping state information in the URL. The URL tells the server anything it needs to know to service the request, it should not need a memory (the session) of any previous activity.
I try to only keep the user identification info in the session. I would get rid of this too, but some tools and libs need the user in the session.