Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I determine if the current platform is a native app or web in Capacitor?

Tags:

capacitor

In Cordova you had immediate access to process.env.CORDOVA_PLATFORM is there something similar in Capacitor?

I'm looking to conditionally load some functions on startup and don’t want to block rendering waiting for async Device.getInfo to come back.

For example I want to determine immediately wether to import a script that make's native keyboard modifications, but I don't want to import this script if we are running on web

try {
  const { Keyboard } = Plugins
  Keyboard.setAccessoryBarVisible({ isVisible: true })
} catch (error) {
  // Keyboard isn't available on web so we need to swallow the error
}

I'm using vue-cli

like image 570
Titan Avatar asked Sep 01 '19 10:09

Titan


People also ask

Is capacitor a native app?

At the end of the day, Capacitor apps are native apps. They can incorporate native UI controls and access any native SDK or API available on the platform.

What is capacitor in mobile development?

Capacitor is a cross-platform native runtime that makes it easy to build performant mobile applications that run natively on iOS, Android, and more using modern web tooling. You can think of it like Electron or Tauri, but for mobile apps.

What is ionic platform?

The Platform service can be used to get information about your current device. You can get all of the platforms associated with the device using the platforms method, including whether the app is being viewed from a tablet, if it's on a mobile device or browser, and the exact platform (iOS, Android, etc).


2 Answers

The answers so far are all correct, if you take a look into the Capacitors source code, there a few ways available, which can be used (but are undocumented for now):

  • Capacitor.getPlatform(); // -> 'web', 'ios' or 'android'
  • Capacitor.platform // -> 'web', 'ios' or 'android' (deprecated)
  • Capacitor.isNative // -> true or false

Be aware, that the method Capacitor.isPluginAvailable('PluginName'); only returns if the plugins is available or not (obviously) but important here, it does not tell you, if the method you want to execute after checking the availability is for your platform available.

The documentation of the Capacitor Plugins is not completed (yet).

Example (code), for the plugin StatusBar:

// Native StatusBar Plugin available
if (Capacitor.isPluginAvailable('StatusBar')) {

    // Tint statusbar color
    StatusBar.setBackgroundColor({
        color: '#FF0000'
    });

}

This would result in an error on iOS, since this method is not available there, on Android it works fine so far.

That means, that you need to implement a check of the Plugin and Platform combination by yourself (for now), may this will be improved in the future by Ionic / Capacitor itself.

Something like:

// Native StatusBar available
if (Capacitor.getPlatform() === 'android' && Capacitor.isPluginAvailable('StatusBar')) {

    // Tint statusbar color
    StatusBar.setBackgroundColor({
        color: this.config.module.GYMY_MODAL_STATUSBAR_HEX_STRING
    });

}

One more thing, you are not able to check, whether the method exists within this plugin (f. e. for the code above setBackgroundColor) as it is available, but throws an error (Error: not implemented) on a platform, which does not support it.

Hope I could help some of you guys.

Cheers Unkn0wn0x

like image 122
Unkn0wn0x Avatar answered Sep 17 '22 12:09

Unkn0wn0x


There is also the property Capacitor.isNative which you could use to determine whether the WebApp is running in Capacitor or in the Web.

https://github.com/ionic-team/capacitor/blob/master/core/src/definitions.ts

Update: In Capacitor V3 you can use Capacitor.isNativePlatform() for this. https://capacitorjs.com/docs/v3/core-apis/web#isnativeplatform

like image 29
laberning Avatar answered Sep 20 '22 12:09

laberning