diff --git a/experiments/browser_based_querying/src/hackernews/Playground.tsx b/experiments/browser_based_querying/src/hackernews/Playground.tsx index d9a124fd..765d359b 100644 --- a/experiments/browser_based_querying/src/hackernews/Playground.tsx +++ b/experiments/browser_based_querying/src/hackernews/Playground.tsx @@ -235,55 +235,74 @@ export default function HackerNewsPlayground(): JSX.Element { }; }, [fetcherWorker, queryWorker, handleQueryMessage, handleQueryError]); - if (BROWSER && BROWSER.name === 'safari') { - return ( - - - - Safari and iOS browsers not supported - -

- Due to an{' '} - - open issue - {' '} - in the WebKit engine, this demo does not work in Safari. -

-

Please use a supported browser, such as Firefox or Chrome.

-
-
-
- ); - } + const ios = BROWSER && BROWSER.os === 'iOS'; + const oldSafari = BROWSER && BROWSER.name == 'safari' && (BROWSER.version === null || BROWSER.version < "16.6"); - if (BROWSER && BROWSER.os === 'iOS') { - return ( - - - - iOS not supported - -

- Due to an{' '} - - open issue - {' '} - in the WebKit engine, this demo does not work on iOS-based mobile devices or in the - Safari desktop browser. -

-

Please try this demo on desktop (in Firefox or Chrome) or on an Android device.

-
-
-
- ); + if (oldSafari) { + const browserVersion = BROWSER.version || ''; + if (ios && oldSafari) { + return ( + + + + Please update your iOS version + +

+ Due to an{' '} + + open issue + {' '} + in the WebKit engine, this page requires Safari 16.6 or newer, which shipped with iOS 16.7. +

+

Please update to a newer version of iOS and Safari, or visit this page on another device.

+

+ We believe you are currently using Safari {browserVersion} on iOS. + If this is incorrect, please{' '}let us know. +

+
+
+
+ ); + } else { + return ( + + + + Please update your browser version + +

+ Due to a{' '} + + bug + {' '} + in the WebKit engine, this page requires Safari 16.6 or newer. +

+

Please update to Safari 16.6+, or switch to Firefox or Chrome.

+

+ We believe you are currently using Safari {browserVersion}. + If this is incorrect, please{' '}let us know. +

+
+
+
+ ); + } } if (!ready) {