v-idle
v-idle copied to clipboard
malekim
Not supported for Multiple Tabs
Is there a way to use common idle timer for multiple tabs?
I have implemented this package and it is working perfectly when I'm opening my app in a single tab. But if I have my app opened in multiple tabs and if I don't touch the second tab for 5 minutes, I'm getting logged out of the app even though I'm working on the current tab because the second tab was idle. Is there a solution for this? like storing the timer value in local storage or something?
It is possible with localStorage. I will implement it, but I need some time to rethink this package for this feature.
I'm in the process of rolling out my own solution for this because of the exact same need. If it helps, or correct me if you have a better method, is creating a unique ID for the session component, and on monitored events (i.e. click, mousemove, etc.) I'm setting a value in local storage ({uuid}:{currentTime}). By adding an event listener on "storage" I can check if my unique ID is equal to the one passed, and if not, I know I need to clear my timer as it was done elsewhere (another tab). Without checking this unique id I ran into endless loops.
I suppose one could even bake in reactivity to local storage but it seemed overkill.
@leokyohan Currently it's almost done, you can check the code on that branch: https://github.com/malekim/v-idle/tree/feature/multitabs
Possible I will merge this week, I need just to test if everything still works fine.
@patrickryan79 I took a different approach. I'm passing the latest value of start (in unix time) to localStorage. Every second the code is taking a value of start from localStorage, so it's always newest. And it will work even if user switched tab to totally different website. I see two downsides:
- It won't work on the server side, so while using nuxt.js there is a need to wrap a component with client-only
- There is a need of setting an unique id in case of having more than one v-idle components on the single page
I tried to build a service worker for that, but I think it's too complicated for quite simple task.
Thanks a lot for taking the time to fix it. Just let me know when you merge it in to the next version. Thanks again. :)
I don't know how close this is to being validated, but it was my understanding localStorage was not reactive (unless you did something like this) but I thought I'd mention another project with similar goals and how they use a BroadcastChannel if available then fallback to localStorage and use event listeners to synchronize between tabs:
https://github.com/SupremeTechnopriest/react-idle-timer/tree/master/src/MessageChannel
Trying to use localStorage as done in your branch works as far as the data itself within the component, but the UI doesn't seem to update to reflect the new value. Additionally, the usage of cache: false seems to be deprecated so maybe a different implementation is required here?
