Capacitor(JavaScript)

This guide provides step-by-step instructions to integrate the FME JavaScript SDK into a Capacitor-based mobile application.

What is Capacitor?

Capacitor is an open-source native runtime developed by the Ionic team that allows you to build cross-platform mobile applications using web technologies like HTML, CSS, and JavaScript. It enables web apps to run natively on iOS, Android, and the web with a single codebase.

Compatibility with FME JavaScript SDK

The FME JavaScript SDK is designed to work seamlessly within web environments. Since Capacitor wraps web applications in a native container, the FME JavaScript SDK can be integrated directly into the web portion of your Capacitor app. This integration allows you to leverage FME’s features without needing native SDKs.

Integration Steps

1. Create a Capacitor Project

If you haven’t already set up a Capacitor project, follow these steps:

npm init @capacitor/app

Follow the prompts to set up your app. For detailed instructions, refer to the Capacitor Getting Started Guide.

2. Add FME JavaScript SDK

Include the FME JavaScript SDK in your index.html file, typically located in your project's public or www directory. Insert the SDK script tag within the <head> section:

<head>
  <!-- Other head elements -->
  <script src="https://cdn.jsdelivr.net/npm/vwo-fme-node-sdk@1/dist/client/vwo-fme-javascript-sdk.min.js"></script>
</head>

Replace the src attribute with the actual URL if you want to use the downloaded version.

3. Initialize FME SDK

After embedding the SDK, initialize it in your main JavaScript file or within a script tag in your HTML:

document.addEventListener('DOMContentLoaded', function () {
  vwoSdk.init({
    accountId: 'VWO_ACCOUNT_ID',
    sdkKey: 'VWO_SDK_KEY'
    // Additional configuration options
  });
});

Replace VWO_ACCOUNT_ID and VWO_SDK_KEY with your actual FME account ID. Refer to the FME JavaScript documentation for additional configuration options.

4. Build and Sync Your Project

After setting up your project and integrating the FME SDK, build your project and sync it with the native platforms:

npm run build

npx cap sync

This will copy your web assets into the native iOS and Android projects.

Platform-Specific Setup

Android

Add the Android platform to your project:

npx cap add android

Open the Android project in Android Studio:

npx cap open android

Run your app on an emulator or connected device.

iOS

Add the iOS platform to your project:
```
npx cap add ios
```
Open the iOS project in Xcode:
```
npx cap open ios
```
Run your app on a simulator or connected device.

Updated 23 days ago