From 8de18f54f6f876c280d3068dd62f3cff8ae4bd39 Mon Sep 17 00:00:00 2001 From: Jason Grout Date: Thu, 10 Oct 2019 15:22:24 -0700 Subject: [PATCH] Fix Safari multiple tabs by working around a Safari bug. Fixes #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
No events received
``` 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 #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. --- packages/apputils/src/windowresolver.ts | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/apputils/src/windowresolver.ts b/packages/apputils/src/windowresolver.ts index 4bad4b7f8e59..c1d981e7fa3d 100644 --- 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; }