Ionic 5 / Capacitor: How to find out if app is running in browser or compiled as native app?

Question

I just want to know, if my Ionic 5 app is running in a browser, or in the webview of a compiled app.

Platform does not work: https://ionicframework.com/docs/angular/platform
It just tells about the device. But when I run it in chrome on an android device, it returns the same platforms as when I run it compiled.

Analysing the URL to check if it the webview url works, but not when using capacitor live reload. Because than it is the same URL like locally in the browser. And by the way, analysing the URL feels like an ugly solution.

Is it really that hard to get this simple and important information, or do I just miss something?

Edit:
Platform output
Chrome in Ubuntu with ionic serve: ["desktop"]
Chrome in Android: ["android", "mobile", "mobileweb"]
Android with capacitor livereload: ["android", "phablet", "mobile", "mobileweb"]
Android compiled: ["android", "phablet", "cordova", "capacitor", "mobile", "hybrid"]

Liegnitz

Hello! Could you please add what's the result of calling the platforms() method (ionicframework.com/docs/angular/platform#platforms-string-) on both scenarios? That method returns a list of platforms, so it'd be useful to see if there's any difference (or if there's a bug in Ionic). – Gilbertson

Added it to the original post. I think the livereload should output "capacitor", right? Then I had a property to differentiate. – Liegnitz

Not really, I think capacitor would only be returned when running natively on mobile devices (livereload is a bit tricky since it's only used during development). But still you can use something like this const isBrowser = platform.is('mobileweb') || platform.is('desktop') and it should work, right? That way you'd know if the app is running natively or in a browser. – Gilbertson

But capacitor with livereload gives me "mobileweb", too. And I thought the reason for capacitor livereload is, that I can test the native app with live reload. When this is not the case, why should I use it? For browser testing I have ionic serve. – Liegnitz

That's a good question. In the Capacitor docs it's mentioned that ionic capacitor run will do the following: Perform ionic build (or run the dev server from ionic serve with the --livereload option). So the live reload flag will just run the dev server but on the device. I don't use it very often tbh but I guess it's useful when dealing with iOS and the top/bottom safe area insets for example. Could you please try to call a native plugin when using livereload to see what happens? – Gilbertson

When I call capacitor browser plugin (capacitorjs.com/docs/apis/browser), it opens in systems web browser not, the in-app-browser. But then I really have the question: Why do I need capacitor live reload? What is the difference to ionic serve – Liegnitz

Answer 1

Check Capacitor.getPlatform() If returns web then it’s running as website, if returns ios or android then it’s native.

Or can also check Capacitor.isNativePlatform().

https://capacitorjs.com/docs/core-apis/web#getplatform

Initial

It does not in livereload mode. Thats the discussion (see above). I mentioned it in my basic question. – Liegnitz

This is different from ionic platform, you don’t mention Capacitor.platform anywhere in your question – Initial

Ah, thank you. Did not read it correctly. This works! Maybe you can add link to the docs to your answer: capacitorjs.com/docs/basics/utilities#getplatform – Liegnitz

Works perfectly this, thank you. I was also analysing URLs but getting mixed results. Capacitor.getPlatform() works perfectly, thank you! – Spanner

Answer 2

First import capacitor core

import { Capacitor } from '@capacitor/core';

then check platform using the following code

if (Capacitor.getPlatform() === 'ios') {
    // do something
  }else{
    //this this console log the platform if its not IOS
    console.log('PLATFORM IS', Capacitor.getPlatform())
  }

Indignant