Oracle APEX Detect multiple browser tabs

One complaint I often hear about APEX applications is, issues users may face when they open application in multiple browser tabs/windows. Some pages which contains only reports or dash board pages may work fine even when opened in multiple tabs/windows. However, some pages may have issues like wrongly updating session states, seeing mixed data from two separate records or worst case wrong data being updated to DB. General advise I give to users is, please use different browsers, if you want to open same application/page in two tabs.

But, can we somehow detect that user has opened more than one tab and show the message directly from the application itself? And the answer is, Yes, we can and here is the link to demo.

If you want to implement this technique in your APEX application or page, all you need to do is

1. Download noMulTabs.js and add this JS file to your APEX application. If you are not sure what is the best way to do it, you can refer Adding JavaScript to an Application Express application section in JavaScript API Reference documentation.
2. Create Dynamic Action in Page 0 which executes on "Page Load" event. Add "True" action which executes JavaScript code and put below JS code in code section.

          noMulTabs.detect();

That's it, you are good to go.

If you want only some pages in the application to be restricted from opening in multiple tabs, then you can achieve it by specifying "Server-side Condition" for Dynamic Action in Page 0.

If you want to change redirect URL or want to change the alert message, then you can do it using fallbackUrl and alrtMsg parameters. Same code below..

noMulTabs.detect({

 fallbackUrl: "http://www.enter-redirect-url.com/",

 alrtMsg: "Your Message goes here.."

});

How it works:

Logic is developed using

1. A Browser Cookie: Default life span of Cookie is "Session". We can access Cookie value from JavaScript, as long as page is loaded from same domain. 
2. window.name: Window.name value will last as long as the tab is opened and survives over page reloads.

Algorithm: 

On Page load

1. If cookie value is empty or cookie has some value but it's not equal to current session id then go to Step 2, otherwise (i.e. Cookie value is same as current session id) go to Step 3.
2. Perform following actions
• Save Current Session ID to Cookie
• Append Current Session ID to window.name
3. Check if window.name contains Current Session ID, If yes, then do nothing. If no, then execute redirect logic.

Note: When you are here and if you don't know about APEX_CLONE_SESSION, then please read about it here. If you want to enable users to use multiple tabs without having session state conflicts issues, then you can use this request value.

Tested with Firefox 68.3, Google Chrome 79.0 and Microsoft Edge 44.17763.831.0

APEX versions: 18.2, 19.2

Thank you.