Javascript event on tab or window open - javascript

I'm developing an online production management software and I need to keep track of which pages of the app the user has open.
I'm currently using body onload and onunload -events to modify a page specific key/value -pair in local storage to "true" or "false" which I then use to tell if the user has the page open or not.
The problem is that when I do it like this and the user has multiple instances of the same page open and he closes one of them, then the value of the key in the local storage changes to "false" even when there are still other instances open.
I guess I could try to do this with a kind of a counter which is incremented on the pages body onload event and then decremented on the body onunload event.
But then there is the problem that the body onload event fires also when refreshing the page so then the user could have none of the pages open and the app would still think that there are pages open.
What would be a good way to track wich pages of the site or app the user has open?.

Related

Best way to detect browser window changes like go back, url change, reload, close event

So I am working on a testing application and I need to call a finsihTheTest() function (i.e. this function finishes the test by saving answers, time and other information) whenever following conditions occur:
User tries to reload page.
User tries to go back from the page.
User tries to close the tab.
User tries to close the browser window.
User goes to another url.
If anything happens that closes the page like laptop/PC shutdown, internet lost or anything else.
What I exactly want to do is, if once a user starts the test and by any mean he attempts to leave I want to save his state. Which is being done by the function finishTheTest().
I got a clue but it didn't work:
function UnLoadWindow() {
return 'We strongly recommends NOT closing this window yet.'
}
window.onbeforeunload = UnLoadWindow;
To get the full results for your cases there's many things you should now on how browsers react on many scenarios.
To understand more please read this section :
Especially on mobile, the unload event is not reliably fired. For example, the unload event is not fired at all in the following scenario:
A mobile user visits your page.
The user then switches to a different app.
Later, the user closes the browser from the app manager.
Also, the unload event is not compatible with the back/forward cache (bfcache), because many pages using this event assume that the page will not continue to exist after the event is fired. To combat this, some browsers (such as Firefox) will not place pages in the bfcache if they have unload listeners, and this is bad for performance. Others, such as Chrome, will not fire the unload when a user navigates away.
If you're specifically trying to detect page unload events, it's best to listen for the pagehide event.
window.addEventListener('pagehide', function(event) {
document.cookie = "saveData=test"
},false)
This way you can save your user current data and reload it on next page window load event

Is there anyway to detect when a user goes to their homescreen and back into their browser?

I need to be able to detect when a user re-opens their browser after they go to their homescreen by clicking the home button on a mobile phone.
Is there an event I can subscribe to or something?
EDIT: To make this extremely clear, I am looking for a solution based in the web, not a mobile app. I need a js event or something to detect when my website is reopened.
The unload event can be monitored to check if the page has been closed dues to navigation away from the page or specific user action has been take to close the page.
The beforeunload evemt is similar to unload but it may be possible to ask if the user wants to stay on the page. If you want to debug when this event occurs I would suggest saving a message in local storage and logging (or otherwise alerting) it in debug code when the page is loaded again.
The blur event can be used to see if the page has lost focus by checking the relatedTarget property of the event object - if focus has been transferred off page it will be null.
None of these can implicitly check if the user actually went to the home screen and came back, and I would consider it a security breach if you could tell exactly. The blur event can at least tell if the page has lost focus, but will fire in a desktop environment if the user clicks on, say, the address bar.

Prevent JS window.open() from opening multiple windows across sessions

I'm facing a problem like this:
I've an HTML page , when I click a button it triggers a job on the backend server, the status on the page keeps getting refreshed and when it reaches a certain state a new window is opened through JS logic :
if (status) {
window.open(URL, "_blank");
}
Now, my problem is if this page is open on multiple browsers, or even multiple instances of same browser, the window.open() is triggered across all of them when the status is true.
Is there a way to make the window open only from the page or browser session from where the job was triggered? Please help.

What can be the event similar to onpopstate that works across documents?

From mozilla docs:
A popstate event is dispatched to the window every time the active
history entry changes between two history entries for the SAME
DOCUMENT.
Which window event should i use if i need to listen to 'session history changes' ACROSS DOCUMENTS in a browsing context?
I am writing a js library that helps tracking navigation when user use back/forward browser buttons. The library would record when user is navigated from page B to page A (backwards) or page A to page B(forward). I've achieved the tracking for the pages that use hashes using the 'popstate' event but when user navigate from page A to page B this event doesn't work.
I've looked at pageshow/pagehide events but they fires on simple page loads as well and not just when the 'session history' changes (ie page fetched from history).
What should i be looking at to know "browser has looked into session history to fetch the current page"?
You're going to have to handle the Window's beforeunload event, and also put code on whichever page loading event is appropriate for your use case.
Note that for beforeunload, you don't have time to write something server-side. You'll have to track this in LocalStorage.
There is something weird in your requirements:
You say you are writing a js library, but for this library to work across different documents, for a start, it would at least have to be executed on every documents navigated by the user.
And even if it were the case, there wouldn't be any solid way to do what you want.
Browsers' behavior regarding history navigation vary a lot:
For instance, FF will keep in memory its current state, and will not reload the page per se, but simply reactivate its saved state (i.e you won't even be able to know that the user came back to this page (apart from ugly polling of performance.navigation.type, which despite what MDN says is only absent in Safari).
So all in all, what you want to make is a job for a browser extension, not for a web-library.

Chrome API Alarm stops after page refresh

Reading around, I was under the impression that the Chrome alarm continues to work even after Chrome is closed, page refreshed etc. From one of the Google results:
With the Chrome alarm APIs, you can set an alarm that lasts as long as
the app is installed, even if its background page goes inactive.
My problem is that I have setup a Chrome alarm in my options.js page for a Chrome Extension. The alarm is created (chrome.alarms.create) when the options page is saved.
The alarm works if I keep my page open. However, if I reload the page (options.html), I don't get the alarms anymore.
Here is part of my options.js
$('#save-options-button').on('click', function() {
//Clears existing alarm
chrome.alarms.clearAll();
//Create alarm
chrome.alarms.create("fetchAlarm", {
delayInMinutes: 1,
periodInMinutes: 1
});
chrome.alarms.onAlarm.addListener(function(alarm) {
console.log("Got an alarm!", alarm);
});
});
I guess you are quoting the Chrome Apps documentation, that's why it gets confusing.
What was meant is that event pages (a type of background page) will be woken up to serve an alarm event even if they were unloaded for being idle.
This applies only to event/background pages. Chrome would not randomly open a page only because an event that the page listened to in the past happened. As such, you should not put actual event listener logic into UI pages (options, popup, etc.)
In your case, refreshing the page makes the JS context that contained the listener to be destroyed along with it, and your logic only adds a listener after a click. Even if you added that addListener to the top level code instead, it would only function as long as the page is open.
So, you will need to add a background page to service that event (the actual listener).
A background page is normally always ready to answer events. Event pages are special in that Chrome remembers which events should trigger their load and doesn't keep them loaded. You can read more about it in another answer of mine.

Categories