Compatibility

This Zappar platform and Universal AR SDKs work well on the browsers that enjoy the vast majority of mobile market-share. That said, there are a number of web browsers available across the mobile and desktop device landscape.

Supported Browsers

Best

  • Safari for iOS (version 11.3 and later)
  • Chrome for Android (versions from at least the last year)

Functional

  • Most Webkit/Blink-based web browsers for Android, including Brave (good)
  • Most third-party web browsers for iOS from iOS 14.3 and later (good)
  • iOS in-app web views implemented with SFSafariViewController (good)
  • iOS in-app web views implemented with WKWebView from iOS 14.3 (good)
  • Firefox for Android (good, however performance may be lower than other browsers)
  • Chrome for Mac/Windows (*)
  • Firefox for Mac/Windows (*)
  • Safari for Mac (*)

Known to Not Work

  • iOS in-app web views implemented with WKWebView prior to iOS 14.3 - this iOS technology do not support camera access at all and thus we’re unable to support it. Apple has rectified this issue in iOS 14.3.
  • iOS in-app web views implemented with the deprecated UIWebView component - this iOS technology do not support camera access at all and thus we’re unable to support it.
  • Non-Safari web browsers on iOS, including Chrome, Firefox and Brave, before iOS 14.3 - these browsers use WKWebView due to App Store restrictions and thus do not support camera access.
  • Browsers without motion sensor access (e.g desktop browsers) don't support instant world tracking or attitude-based camera poses.

Browsers without motion sensor access (e.g desktop browsers) don't support instant world tracking or attitude-based camera poses.

Detecting Browser Compatibility

To make it easy to detect if your page is running in a browser that's not supported, we've provided the BrowserCompatibility component.

<>
   <BrowserCompatibility />
   <Canvas>
     {/* Content */}
   </Canvas>
</>

The BrowserCompatibility default fallback shows a full-page dialog that informs the user they're using an unsupported browser, and provides a button to 'copy' the current page URL so they can 'paste' it into the address bar of a compatible alternative. You may also provide a custom fallback UI to be displayed.

<BrowserCompatibility fallback={<div>Sorry!</div>} />

For more custom implementations, consider usingbrowserIncompatible function.

const incompatible = browserIncompatible(); // true / false
zapcode branded_zapcode i