diff --git a/site/docs-md/apis/index.md b/site/docs-md/apis/index.md index 4c88f1c48..1f31f2262 100644 --- a/site/docs-md/apis/index.md +++ b/site/docs-md/apis/index.md @@ -13,4 +13,39 @@ Capacitor includes a number of Native APIs that are available to all Capacitor a For those coming from Cordova, the core Capacitor APIs cover much of the core Cordova plugins, and also include some new ones. -See the APIs list on the left menu for the full list of available APIs. \ No newline at end of file +See the APIs list on the left menu for the full list of available APIs. + +## API Usage + +To use a Capacitor API, follow these steps: + +1) Import the `Plugins` object. It represents the registry of all Capacitor plugins. +```typescript +import { Plugins } from '@capacitor/core'; +``` + +2) Get a plugin from the Plugin Registry (`Plugins` object). +```typescript +const { Browser } = Plugins; +``` + +3) Use the plugin API: +```typescript +async openBrowser() { + // On iOS, for example, open the URL in SFSafariViewController (the in-app browser) + await Browser.open({ url: "https://ionicframework.com" }); +} +``` + +A common mistake is to import a plugin directly, then use the plugin API immediately, resulting in the web implementation being used: +```typescript +import { Browser } from '@capacitor/core'; + +async openBrowser() { + // On iOS, for example, this will open the URL in Safari instead of + // the SFSafariViewController (in-app browser) + await Browser.open({ url: "https://ionicframework.com" }); +} +``` + +By using the plugins from the plugin registry (`Plugins` object), the native implementation of the plugin is used (if available), with fallback to the web version.