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 (
+
+
+
+
+
+ );
+ }
+
+ 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);
+ };
+ });
+};