Capacitor には、すべての Capacitor アプリで利用できるいくつかの Native なプラグイン API が含まれている。これらは Capacitor「コアプラグイン」と考えることができ、各プラットフォームで共通に必要な機能に簡単にアクセスできるようにします。
Cordova から来た人のために、コア Capacitor プラグインはコア Cordova プラグインの多くをカバーし、いくつかの新しいものも含んでいる。
使用可能なプラグインの完全なリストについては、左のメニューの 「プラグイン」 リストを参照してください。
Capacitor プラグインを使うには以下の手順となります:
1)
Plugins
オブジェクトをインポートします。これはすべての Capacitor プラグインのレジストリとなります。
import { Plugins } from '@capacitor/core';
2) プラグインレジストリ (Plugins
オブジェクト)から利用するプラグインを取得します。
const { Browser } = Plugins;
3) プラグインの API をご利用ください:
async openBrowser() {
// On iOS, for example, open the URL in SFSafariViewController (the in-app browser)
await Browser.open({ url: "https://ionicframework.com" });
}
よくある間違いは、プラグインを直接インポートしてすぐにプラグイン API を使用すると、Web だけで動作する実装が使用されてしまうことです:
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" });
}
プラグインレジストリ(Plugins
オブジェクト)のプラグインを使用することで、プラグインの Native 実装が(利用可能な場合)使用され、Web バージョンにフォールバックします。
Capacitor plugin event listeners run outside of Angular’s
NgZone
execution context. Contain handler logic within an
NgZone.run
block to ensure Angular’s change detection is triggered:
constructor(private ngZone: NgZone) { }
async ngOnInit() {
Network.addListener("networkStatusChange", (status) => {
this.ngZone.run(() => {
// This code will run in Angular's execution context
this.networkStatus = status.connected ? "Online" : "Offline";
});
});
}