Storage event not triggering on iphone browsers(chrome and safari) until tab is focused

Question

Using ReactJS. creating 2 components to explain the issue.

Sample code:

chrome browser window 1: https://localhost:5000/home

componentDidMount(){
 function callme(){
  if (event.key == "1000") {
     console.log("triggerred from another window");
   }
 }
 window.addEventListener("storage", callme, false);
}

chrome browser window 2: https://localhost:5000/pay

componentDidMount(){
  localStorage.setItem("1000","hello");
  localStorage.removeItem("1000");
}

problem statement:

1) open chrome browser on iPhone and open first URL(https://localhost:5000/home)

2) open a new window and open second URL(https://localhost:5000/pay)

when the second URL componentDidMount() will update localStorage and storage event on the first window should trigger, which is working in all the browsers on desktop but on mobile browsers.

It only triggers if I focus the window 1 then only the storage event is triggering. Whereas I want the storage event to trigger without focusing the second window.

According to MSDN, storage event always triggers whenever there is an update to the localStorage(same origin)

note: This problem will happen on mobile browsers only.