On the application I am working on, the state of all items is saved in the backend API database. The Vue state has a boolean to let the user know when the state is dirty (synced with backend) or not. So the user can hit ctrl + s and save whenever they make changes.
An issue I have is that when a user hits refresh, they could lose their work. So I implemented a feature to open a dialog to alert the user they're about to lose their work if they hit f5 when the state is dirty. This was done with the "beforeUnload" event listener.
But I also need security for the users work when they hit the back button.
I can detect it with this code:
window.addEventListener("popstate ", (e) => {
});
But I can't figure out how to handle the event correctly and have the user cancel the pressing of the back button. Is this even possible?
Thanks.
This is not reliably possible in browsers, regardless of the framework you are using; see https://stackoverflow.com/a/12381610/5471218 for a similar question.
That said, I strongly advise against interfering with the user's browser interaction that way. If you want to protect users from losing data, you could save it to local storage until you have confirmation that the data has been stored in the backend.
Related
I'm using React on the front, nodejs + express for the back, mongodb , and passportJS for the auth, and express sessions to store the session information.
Whenever someone joins my website, react is sending a request to the backend to check if the user is logged in, and then if the user is logged in it will show adapted content. The problem is that whenever someone is logged in it will first show in the nav bar a button that says "log in" and only half a second later will it be updated to "log out" because the post request that says the user is logged will resolve. What is the best practice to solve this issue? at the moment I check if the user is logged in every single time that the user navigates to a new page and it does not sound like a best practice to me.
Try adding a loading state to your component. So instead of two states of login and logout, you will have login, loading, and logout.
This will allow you to add a new UI state for loading. Now it up to you to decide the UX.
UX Solution:
Some sites just put a giant loader and blocks the site till the app is loaded which works but is not that appealing.
A more modern solution is to use a skeleton loader. This will display a fake component while the application is loading (Note: NOT the whole sight needs to be in this skeleton state. It can be only the navbar while the rest of the application is displayed).
See AntD skeleton: https://ant.design/components/skeleton/
Context: I am building a progressive web apps that sends my users push notifications with service worker.
Is there a way to ensure that if the user browses to my site while notifications are currently showing that the notifications are hidden?
I want to avoid the situation where they navigated to my site and the notifications are still displaying, now stale.
Yes, from the document you can clear all currently showing notifications like this:
// From a document.
navigator.serviceWorker.ready.then(registration => {
registration.getNotifications().then(notifications =>
notifications.forEach(notification => notification.close()));
});
You could choose to simply run this code every time a page loads to solve your case, or you could additionally add a focus event listener to the document that runs this code to ensure it is applied every time your site is brought into focus.
Any Xpages application update in design causes the application refresh which removes scope variables, session etc. When this occures and there is a page opened in users browser with some partial refresh action buttons ... such buttons simply do nothing when clicked which is quite confusing. No message that's warning the user that the page is stale or something. Is there a way how to detect such situation in general so I can inform user in browser with some dialog that he should reload the entire page?
For all scope variables above request (which gets initialized when you send a request and is always shiny and new) you never can take their existence for granted. Best example: user leaves a form open, locks the PC, goes for lunch, lets the session expire (which also deletes the view scope). (S)he comes back, opens a new tab and logs in - so there is a valid (new) session, hits submit in the first tab -> bum all your code fails.
This is the same scenario as an updated design short of the scenario Panu was pointing to.
So in your code check for the existence of your scoped variables and force a full refresh. Or (I like that better) add an error to the page so that gets displayed with an appropriate action.
Whats the standard way to detect the browser window close event in any standard browser? By standard I mean something that sites like Google or Facebook implement when the "keep me signed in" checkbox is unchecked. I have an interactive website in place where theres an Instant Messaging module and I need to inform the other user that the partner has logged out.
Thanks in advance.
The keep me signed in links are managed via cookies and cookie timeout lengths.
One approach to doing something like this is to have the browser make an async ajax call every (1 minute) to your server so you know they are still logged in. If you dont receive one of these calls within say 90 seconds you can say they are logged out.
This approach would also catch cases where for example their connection went or their computer crashed.
I want to know how you guys deal with back button issues in your web applications.
I can not forbid users to click back button on their browser, but when they hit it, the page code doesn't run. So writing in page_load() makes no sense.
I have searched online and found this link: Disabling Back button on the browser. It does not work for me. Any idea?
There is no way to disable the back button. You can try to open your page/form in a new window so there would be nothing to navigate back to
Normally, If I have a critical or lengthy form, I tend to maintain a dirty-flag and if the user starts entering something, the dirty-flag gets set and on save or submit it gets reset. You can use unload/beforeunload javascript event to see if the dirty-flag is set and ask for confirmation.