メインコンテンツへスキップ
@capgo/capacitor-watch デバイス API オープンソース

視聴する Capacitor プラグイン

Apple WatchとWear OSの通信。スマホとウォッチアプリ間の双方向メッセージング

インストール

bun add @capgo/capacitor-watch bunx cap sync
npm、pnpm、または yarn
  • npm install @capgo/capacitor-watch
  • pnpm add @capgo/capacitor-watch
  • yarn add @capgo/capacitor-watch

ガイド

Capacitor で Watch を使う方法

@capgo/capacitor-watch の使用方法

Capacitor 用の Apple Watch 通信プラグイン。WatchConnectivity を使用して iPhone と Apple Watch 間の双方向メッセージングを提供します。

インストール

bun add @capgo/capacitor-watch
bunx cap sync

このプラグインで利用可能な機能

  • sendMessage - ウォッチにインタラクティブなメッセージを送信します。成功するにはウォッチが通信可能な状態である必要があります。即時性が求められる対話的な通信に使用してください。
  • updateApplicationContext - ウォッチと共有するアプリケーションのコンテキストを更新します。最新のコンテキストのみが保持され、以前のコンテキストは上書きされます。ウォッチに表示させる必要があるアプリの状態を同期する際に使用してください。
  • transferUserInfo - ユーザー情報をウォッチに転送します。転送はキューに格納され、ウォッチがオフラインの状態でも順番に配信されます。確実に届ける必要がある重要なデータの転送に使用してください。
  • replyToMessage - 返信を求めてきたウォッチからのメッセージに対して返信します。messageReceivedWithReply イベントへのレスポンスとして使用してください。

使用例

sendMessage

ウォッチにインタラクティブなメッセージを送信します。成功するにはウォッチが通信可能な状態である必要があります。即時性が求められる対話的な通信に使用してください。

import { CapgoWatch } from '@capgo/capacitor-watch';

await CapgoWatch.sendMessage({
  data: { action: 'refresh', timestamp: Date.now() }
});

updateApplicationContext

watchと共有するアプリケーションコンテキストを更新します。最新のコンテキストのみが保持され、以前のコンテキストは上書きされます。watchに表示する必要があるアプリ状態の同期に使用します。

import { CapgoWatch } from '@capgo/capacitor-watch';

await CapgoWatch.updateApplicationContext({
  context: { theme: 'dark', lastSync: Date.now() }
});

transferUserInfo

ユーザー情報をwatchに転送します。転送はキューに格納され、watchが現在到達できなくても順序どおりに配信されます。確実に届ける必要がある重要なデータに使用してください。

import { CapgoWatch } from '@capgo/capacitor-watch';

await CapgoWatch.transferUserInfo({
  userInfo: { recordId: '123', action: 'created' }
});

replyToMessage

返信を要求したwatchからのメッセージに返信します。messageReceivedWithReplyイベントへの応答として使用します。

import { CapgoWatch } from '@capgo/capacitor-watch';

CapgoWatch.addListener('messageReceivedWithReply', async (event) => {
  const result = await processRequest(event.message);
  await CapgoWatch.replyToMessage({
    callbackId: event.callbackId,
    data: { result }
  });
});

リファレンス全文

@capgo/capacitor-watch の使用方法から続きを読む

使用している場合 @capgo/capacitor-watch の使用方法 ネイティブプラグインの作業を計画するには、次と連携してください: @capgo/capacitor-watch @capgo/capacitor-watch の実装詳細については、 スタートガイド スタートガイドの実装詳細については、 Capgo プラグインディレクトリ Capgo プラグインディレクトリのプロダクトワークフローについては、 Capgo による Capacitor プラグイン Capgo による Capacitor Plugins の実装詳細、および プラグインの追加または更新 プラグインの追加または更新に関する実装詳細についてはこちら。

よくある質問

Watch plugin の FAQ

Capacitor アプリに Watch plugin をインストールするには?

"bun add @capgo/capacitor-watch" (または "npm install @capgo/capacitor-watch") を実行し、続けて "bunx cap sync" を実行すると、iOS と Android のプロジェクトにネイティブの code が反映されます。アプリの code で "@capgo/capacitor-watch" からインポートしてください。

@capgo/capacitor-watch は React、Vue、Angular で動作しますか?

はい。Watch は Capacitor パッケージなので、Ionic、React、Vue、Angular、Svelte、素の JavaScript など、Capacitor 内で動くあらゆる Web フレームワークで使えます。

@capgo/capacitor-watch はどの Capacitor バージョンをサポートしていますか?

Capgo プラグインは Capacitor のメジャーバージョンに合わせています。使用している Capacitor のメジャーバージョンに一致するプラグインのメジャーバージョンを使ってください (例: Capacitor 8 ならプラグイン v8)。GitHub の README にある互換性テーブルに、メンテナンス中のバージョンが記載されています。

@capgo/capacitor-watch は無料かつオープンソースですか?

はい。code のソースコードは GitHub の https://github.com/Cap-go/capacitor-watch/ で公開されており、パッケージは npm から無料でインストールできます。バグ報告やプルリクエストも歓迎です。

App Store の審査を受けずに、Watch を使っている code をアップデートできますか?

プラグインのインストールやアップグレードはネイティブの code を変更するため、新しいストアビルドが必要です。その後は、プラグインを呼び出す JavaScript、HTML、CSS の変更を Capgo Live Updates で即座に配信できます。

アプリ審査を待たずにWatchの変更を配信

プラグインをストア用ビルドに組み込めば、Capgo live updates で JavaScript、HTML、CSS の変更を数分でユーザーに配信できます

Capgo から始める