Fix Safari multiple tabs by working around a Safari bug.

Fixes jupyterlab#6921 We use local storage events to communicate between browser tabs in order to see if there are any other tabs with a particular workspace name. The standard says that local storage events are only supposed to be triggered by local storage changes from *other* tabs. However, Safari sometimes triggers these events from changes by the current tab. Here is an example illustrating this: ```html <html> <body> <div id='report'>No events received</div> <script> let date = new Date().getTime(); let report = document.getElementById('report'); window.addEventListener('storage', ev => { if (ev.key !== 'SOME KEY') { return; } if (ev.newValue === date.toString()) { report.innerText = `BUG: received my own local storage change (${date}) as an event.`; } else { report.innerText = `Another tab was reloaded with timestamp ${ev.newValue}`; } }); window.localStorage.setItem('SOME KEY', date); </script> </body> </html> ``` Open that page in two different Safari tabs and start refreshing each one alternately. It was pretty easy for me to get one of the tabs to indicate the bug was happening. Things worked fine in firefox and presumably would in Chrome too. A workaround implemented here is to manually ignore local storage events that we triggered. Even if we move to BroadcastChannel (see jupyterlab#7315), we'll still need to deal with this since Safari doesn't implement broadcast channel, so we'd have to fall back to something like local storage on Safari.
jasongrout · Oct 10, 2019 · 8de18f5 · 8de18f5
1 parent 4cead36
commit 8de18f5
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/packages/apputils/src/windowresolver.ts b/packages/apputils/src/windowresolver.ts
@@ -84,6 +84,18 @@ namespace Private {
    */
   const WINDOW = `${PREFIX}:window`;
 
+  /**
+   * Current beacon request
+   *
+   * #### Notes
+   * We keep track of the current request so that we can ignore our own beacon
+   * requests. This is to work around a bug in Safari, where Safari sometimes
+   * triggers local storage events for changes made by the current tab. See
+   * https://github.com/jupyterlab/jupyterlab/issues/6921#issuecomment-540817283
+   * for more details.
+   */
+  let currentBeaconRequest: string | null = null;
+
   /**
    * A potential preferred default window name.
    */
@@ -123,7 +135,11 @@ namespace Private {
       }
 
       // If the beacon was fired, respond with a ping.
-      if (key === BEACON && candidate !== null) {
+      if (
+        key === BEACON &&
+        newValue !== currentBeaconRequest &&
+        candidate !== null
+      ) {
         ping(resolved ? name : candidate);
         return;
       }
@@ -163,6 +179,7 @@ namespace Private {
    */
   function reject(): void {
     resolved = true;
+    currentBeaconRequest = null;
     delegate.reject(`Window name candidate "${candidate}" already exists`);
   }
 
@@ -197,12 +214,14 @@ namespace Private {
       }
 
       resolved = true;
+      currentBeaconRequest = null;
       delegate.resolve((name = candidate));
       ping(name);
     }, TIMEOUT);
 
     // Fire the beacon to collect other windows' names.
-    localStorage.setItem(BEACON, `${Math.random()}-${new Date().getTime()}`);
+    currentBeaconRequest = `${Math.random()}-${new Date().getTime()}`;
+    localStorage.setItem(BEACON, currentBeaconRequest);
 
     return delegate.promise;
   }