diff --git a/src/index.tsx b/src/index.tsx index 8d151999b..de83dcb30 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -12,7 +12,7 @@ import { setupBeforeInstallPrompt } from './util/installPrompt'; import { IS_INSTALL_PROMPT_SUPPORTED, IS_MULTITAB_SUPPORTED } from './util/environment'; import './global/init'; -import { DEBUG, MULTITAB_LOCALSTORAGE_KEY } from './config'; +import { APP_VERSION, DEBUG, MULTITAB_LOCALSTORAGE_KEY } from './config'; import { establishMultitabRole, subscribeToMasterChange } from './util/establishMultitabRole'; import { requestGlobal, subscribeToMultitabBroadcastChannel } from './util/multitab'; import { onBeforeUnload } from './util/schedulers'; @@ -31,7 +31,7 @@ async function init() { if (IS_MULTITAB_SUPPORTED) { subscribeToMultitabBroadcastChannel(); - await requestGlobal(); + await requestGlobal(APP_VERSION); localStorage.setItem(MULTITAB_LOCALSTORAGE_KEY, '1'); onBeforeUnload(() => { const global = getGlobal(); diff --git a/src/util/multitab.ts b/src/util/multitab.ts index ad1eb5a02..96be1deb0 100644 --- a/src/util/multitab.ts +++ b/src/util/multitab.ts @@ -7,7 +7,7 @@ import type { ApiInitialArgs } from '../api/types'; import type { GlobalState } from '../global/types'; import { IS_MULTITAB_SUPPORTED } from './environment'; -import { DATA_BROADCAST_CHANNEL_NAME, MULTITAB_LOCALSTORAGE_KEY } from '../config'; +import { APP_VERSION, DATA_BROADCAST_CHANNEL_NAME, MULTITAB_LOCALSTORAGE_KEY } from '../config'; import { deepMerge } from './deepMerge'; import { selectTabState } from '../global/selectors'; import { @@ -27,6 +27,7 @@ import { omit } from './iteratees'; type BroadcastChannelRequestGlobal = { type: 'requestGlobal'; token?: number; + appVersion: string; }; type BroadcastChannelGlobalUpdate = { @@ -221,8 +222,17 @@ export function handleMessage({ data }: { data: BroadcastChannelMessage }) { } case 'requestGlobal': { + const { appVersion } = data; + if (appVersion !== APP_VERSION) { + // If app version on the other tab was updated, reload the current page immediately and don't respond + // to the other tab's request because our current global might be incompatible with the new version + window.location.reload(); + return; + } + if (!isFirstGlobalResolved) return; const global = getGlobal(); + if (!selectTabState(global).isMasterTab) return; channel.postMessage({ @@ -328,10 +338,11 @@ export function handleMessage({ data }: { data: BroadcastChannelMessage }) { } } -export function requestGlobal(): Promise { +export function requestGlobal(appVersion: string): Promise { if (channel) { channel.postMessage({ type: 'requestGlobal', + appVersion, }); }