diff --git a/src/app/pages/App.tsx b/src/app/pages/App.tsx index 6cefe999c..62c173f91 100644 --- a/src/app/pages/App.tsx +++ b/src/app/pages/App.tsx @@ -17,6 +17,7 @@ import { isAuthenticated } from '../../client/state/auth'; import Client from '../templates/client/Client'; import { getLoginPath } from './pathUtils'; import { ConfigConfigError, ConfigConfigLoading } from './ConfigConfig'; +import { FeatureCheck } from './FeatureCheck'; const createRouter = (clientConfig: ClientConfig) => { const { hashRouter } = clientConfig; @@ -62,20 +63,22 @@ const createRouter = (clientConfig: ClientConfig) => { // TODO: app crash boundary function App() { return ( - } - error={(err, retry, ignore) => ( - - )} - > - {(clientConfig) => ( - - - - - - )} - + + } + error={(err, retry, ignore) => ( + + )} + > + {(clientConfig) => ( + + + + + + )} + + ); } diff --git a/src/app/pages/FeatureCheck.tsx b/src/app/pages/FeatureCheck.tsx new file mode 100644 index 000000000..abb366a85 --- /dev/null +++ b/src/app/pages/FeatureCheck.tsx @@ -0,0 +1,42 @@ +import React, { ReactNode, useEffect } from 'react'; +import { Box, Dialog, Text, config } from 'folds'; +import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback'; +import { checkIndexedDBSupport } from '../utils/featureCheck'; +import { SplashScreen } from '../components/splash-screen'; + +export function FeatureCheck({ children }: { children: ReactNode }) { + const [idbSupportState, checkIDBSupport] = useAsyncCallback(checkIndexedDBSupport); + + useEffect(() => { + checkIDBSupport(); + }, [checkIDBSupport]); + + if (idbSupportState.status === AsyncStatus.Success && idbSupportState.data === false) { + return ( + + + + + Missing Browser Feature + + No IndexedDB support found. This application requires IndexedDB to store session + data locally. Please make sure your browser support IndexedDB and have it enabled. + + + + What is IndexedDB? + + + + + + + ); + } + + return children; +} diff --git a/src/app/utils/featureCheck.ts b/src/app/utils/featureCheck.ts new file mode 100644 index 000000000..a9474c317 --- /dev/null +++ b/src/app/utils/featureCheck.ts @@ -0,0 +1,21 @@ +export const checkIndexedDBSupport = async (): Promise => { + const ts = new Date().getTime(); + const dbName = `checkIndexedDBSupport-${ts}`; + return new Promise((resolve) => { + let db; + try { + db = indexedDB.open(dbName); + } catch { + resolve(false); + return; + } + db.onsuccess = () => { + resolve(true); + indexedDB.deleteDatabase(dbName); + }; + db.onerror = () => { + resolve(false); + indexedDB.deleteDatabase(dbName); + }; + }); +};