See how Capacitor fits into the entire Ionic Ecosystem ->
Capacitor is part of the Ionic Ecosystem ->

JavaScript Utilities

Capacitor has several JavaScript utilities useful for ensuring apps run successfully across multiple platforms with the same codebase. To use them, import Capacitor then call the desired utility function:

import { Capacitor } from '@capacitor/core';
const isAvailable = Capacitor.isPluginAvailable('Camera');

convertFileSrc

convertFileSrc: (filePath: string) => string;

Convert a device filepath into a Web View-friendly path.

Capacitor apps are served on a different protocol than device files. To avoid difficulties between these protocols, paths to device files must be rewritten. For example, on Android, file:///path/to/device/file must be rewritten as http://localhost/_capacitor_file_/path/to/device/file before being used in the Web View.

// file:///path/to/device/photo.jpg
const savedPhotoFile = await Filesystem.writeFile({
  path: "myFile.jpg",
  data: base64Data,
  directory: FilesystemDirectory.Data
});

// http://localhost/path/to/device/photo.jpg
const savedPhoto = Capacitor.convertFileSrc(savedPhotoFile.uri),
document.getElementById("savedPhoto").src = savedPhoto;

getPlatform

getPlatform: () => string;

Get the name of the platform the app is currently running on: web, ios, android.

if (Capacitor.getPlatform() === 'ios') {
  // do something
}

isNative

isNative?: boolean;

Check whether the currently running platform is native (ios, android).

if (Capacitor.isNative) {
  // do something
}

isPluginAvailable

isPluginAvailable: (name: string) => boolean;

Check if a plugin is available on the currently running platform. The plugin name is used in the plugin registry (e.g. const { Name } = Plugins;), which means it also works with custom plugins.

const isAvailable = Capacitor.isPluginAvailable('Camera');

if (!isAvailable) {
  // Have the user upload a file instead
} else {
  // Otherwise, make the call:
  const image = await Camera.getPhoto({
    resultType: CameraResultType.Uri
  });
}

Contributors

BackNext