How can I detect if I'm running the frontend in a browser?

[mettz]

Hi, folks! Really enjoying Tauri so far! I've just a small issue. Is there a standard way to detect if the frontend of the app is currently running in a browser or in the Tauri webview?

[FabianLars]

You can check if window.__TAURI__ exists.

if (window.__TAURI__) {
  // inside tauri
}

[mettz]

It worked like a charm! Thank you very much!

[elibroftw]

With v2: window.__TAURI_INTERNALS__

[zpng]

./src/components/sidebar/index.tsx:50:53
Type error: Property 'TAURI' does not exist on type 'Window & typeof globalThis'.

48 |
49 | const handleNavigation = (path: string) => {

50 | if (typeof window !== 'undefined' && window.TAURI) {
| ^
51 | // 使用 Tauri 的跳转方式
52 | console.log("in tauri")
53 | window.location.href = tauri://${path};
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
Error beforeBuildCommand pnpm export failed with exit code 1

why i meet the compile error?

[FabianLars]

because typescript only knows about "well known"/standard window properties at build time. You can tell it about the __TAURI__ property by adding this to your index file:

declare global {
    interface Window {
        __TAURI__: Record<string, unknown>;
    }
}

[intfract]

Alternatively, you can check use the in keyword to check whether an object has a property in TypeScript.

if ('__TAURI__' in window) {
  // inside tauri
}

[liyasthomas]

This doesn't seem to be working on Tauri v2.

[FabianLars]

Yeah iirc we only set __TAURI__ now if withGlobalTauri is enabled. Try __TAURI_INTERNALS__ instead.

[burgil]

I created isTauri.tsx with mobile detection support for V2:

const isTauri = '__TAURI__' in window;
export default isTauri;
export const isMobile = navigator.maxTouchPoints > 0;
export const isDesktop = !isMobile;
export const isTauriMobile = isTauri && isMobile;
export const isTauriDesktop = isTauri && isDesktop;

Example Usage:

import isTauri, { isMobile, isDesktop, isTauriMobile, isTauriDesktop } from '../path-to/isTauri'

        <div style={isTauriDesktop ? {
            backgroundColor: 'orange',
        } : {
            overflowX: 'hidden',
        }}>

<Route path="/" element={isTauri ? <Navigate to="/app" /> : <LandingPage />} />

            {isTauriDesktop && <TitleBar />}

I tested it on android, the web and as a windows desktop app.

Update

I added support for the web version, here is a more advanced use case that some might want:

const isTauri = '__TAURI__' in window;
export default isTauri; // running on a desktop app or a mobile app - but not in the browser
export const isWeb = !isTauri; // running on the browser on either desktop or mobile - but not as a tauri app

export const isMobile = navigator.maxTouchPoints > 0; // running in mobile either in the browser or as a tauri app
export const isDesktop = !isMobile; // running in desktop either in the browser or as a tauri app

export const isTauriMobile = isTauri && isMobile; // running on mobile as a tauri app - but not on the browser
export const isTauriDesktop = isTauri && isDesktop; // running on desktop as a tauri app - but not on the browser

export const isWebMobile = isWeb && isMobile; // running on mobile in the browser - but not as a tauri app
export const isWebDesktop = isWeb && isDesktop; // running on desktop in the browser - but not as a tauri app

[Muhammed-Rahif]

Update: on Tauri v2,

- const isTauri = '__TAURI__' in window;
+ const isTauri = '__TAURI_INTERNALS__' in window;