Capacitor

CapApp-SPM is a specialized package used to host Swift Package Manager (SPM) dependencies for your Capacitor project. It acts as a container for the native iOS dependencies required by Capacitor plugins and the core runtime when using SPM integration.

Important: Do not modify the contents of this package, as doing so may cause unintended consequences in your project's dependency resolution or build process.

The SystemBars API (bundled with @capacitor/core) is designed for modern edge-to-edge use cases, allowing you to configure the style and visibility of both the Status Bar and the Navigation Bar.

Key Differences: Unlike the legacy Status Bar plugin, SystemBars does not support setOverlaysWebView() or setBackgroundColor(). It is focused on controlling the appearance (style) and visibility (show/hide) of the bars in an edge-to-edge environment.

Capacitor's HTTP implementation supports cancellation via the AbortSignal API. You can use an AbortController to create an AbortSignal, which is then passed to an HTTP request. When controller.abort() is called, the signal's aborted property becomes true, and any listeners attached via onabort or addEventListener('abort', ...) will be triggered, allowing you to cancel the ongoing network request.

const controller = new AbortController();
const signal = controller.signal;

// Pass the signal to your request
await CapacitorHttp.get({
  url: 'https://example.com/api/data',
  signal
});

// To cancel the request:
controller.abort();

Starting with Capacitor version 6.0.0-rc.0, the Capacitor CLI allows the use of async functions within your capacitor.config file. This enables performing asynchronous operations during the configuration loading process.

// Example concept: your config file can now handle async logic
// (Implementation details depend on your specific config file type, e.g., .ts)
export default async () => {
  const data = await someAsyncOperation();
  return {
    appId: 'com.example.app',
    appName: 'My App',
    webDir: 'dist',
    plugins: { ... }
  };
};

You can use the signal option to allow aborting an ongoing pipe operation. By passing an AbortSignal (obtained from an AbortController), you can trigger a cancellation of the pipe.

Note that if the signal is triggered:

• The source readable stream will be canceled.
• The destination will be aborted.

This behavior can be modified using preventCancel or preventAbort if those options are set to true.

Capacitor provides a Plugin API that allows you to call Native SDKs from your web code. You can write custom native plugins to access device-specific features.

When developing plugins, it is recommended to use:

• Swift for iOS development.
• Kotlin (or Java) for Android development.

Plugins can either be written directly inside your Capacitor app or packaged as an npm dependency for community distribution.

After initializing Capacitor, you must install and add the specific native platform packages to your project to enable mobile deployment.

# For Android
npm install @capacitor/android
npx cap add android

# For iOS
npm install @capacitor/ios
npx cap add ios

By default, CapacitorCookies does not patch document.cookie. If you want document.cookie assignments to use native libraries instead of the standard web implementation, you must enable this feature in your capacitor.config file.

Set the enabled property to true under the CapacitorCookies plugin configuration.

{
  "plugins": {
    "CapacitorCookies": {
      "enabled": true
    }
  }
}

Due to a bug in older Android WebView versions (< 140), standard env(safe-area-inset-*) CSS variables may not return correct values.

By default, the SystemBars plugin injects correct inset values into new CSS variables named --safe-area-inset-*. You should use these as fallbacks in your CSS to ensure proper padding/margins in edge-to-edge layouts.

html {
  padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  padding-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  padding-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
}

You can control this behavior using the insetsHandling configuration setting.

To use the SystemBars API on iOS, you must ensure that "View controller-based status bar appearance" is enabled.

In your Info.plist, set UIViewControllerBasedStatusBarAppearance to YES.

You can also set the default visibility and style by adding UIStatusBarHidden and/or UIStatusBarStyle to your Info.plist.