@ capgo/ 电容器监视

与来自您 Capacitor app 的伴侣手表应用交谈:发送消息,同步状态并接收回复,与 iOS 上的 Apple Watch 和 Android 上的 Wear OS.

🤖 建筑与AI编码代理? 安装 Capgo 技能 所以克劳德代码,代码,光标,副驾驶,或双子座CLI知道如何安装和使用 @capgo/capacitor-watch 在您的电容应用程序中: npx skills add Cap-go/capgo-skills。然后问你的经纪人: 加上@capgo/capor-watch到我的Capacitor应用上并把它接上 代理设置指南 • 妇女 主机磁共振

主要特点

• 信件数字 : sendMessage() 用于交互式信息和 replyToMessage() 来答表.
• 共享状态数字 : updateApplicationContext() 同步最新状态到手表.
• 背景传输数字 : transferUserInfo() 队列数据以交付.
• 活动:消息,应用程序上下文和用户信息收听器,加上iOS上的可达性和激活收听器.
• 状态数字 : getInfo() 报告对齐、可达到性和支持.
• 平台: iOS和Android. 互联网档案馆的存檔,存档日期2013-12-21. iOS使用与 Capgo WatchSDK 手表应用的WatchConnectivity. Android使用Wear OS数据层. 在网上不可用.

为什么是控制者观察?

唯一兼容的 Capacitor 8 插件 双向苹果观察通信数字 :

• 双向通讯 - 在iPhone和苹果观察之间发送和接收信息
• 应用程序上下文 - 用最新的唯值语义同步应用程序状态
• 用户信息传输 - 可靠的排队送货,即使手表下线
• 请求/回复模式 - 互动工作流程和基于召回的反应
• 快速UI准备 - 包括有可观察对象支持的监视侧SDK
• iOS 15+ (英语) - 由Swift软件包管理器为现代iOS所建

对于健康应用,健身跟踪器,遥控器,以及任何延伸至苹果观察的应用都至关重要.

文档

这里有最完整的医生: https://capgo.app/docs/plugins/watch/ (中文(简体) )

兼容性

说明: 此插件的主要版本沿用了Capacitor的主要版本. 使用匹配您的 Capacitor 安装的版本( 如 Capacitor 8 的插件 v8) 。 只有最新的主要版本得到积极维护.

安装

您可以使用我们的 AI 辅助设置安装插件 。 使用以下命令将 Capgo 技能添加到您的 AI 工具 :

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

然后使用下列提示:

Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-watch` plugin in my project.

如果您更喜欢手动设置,请通过运行以下命令来安装插件,并遵循下面的平台特定指令:

npm install @capgo/capacitor-watch
npx cap sync

所需资源

• iOS系统: iOS 15.0+(最低8号电机). 需要监视连接能力.
• 监视系统: watchOS 9.0+. (中文(简体) ). 需要配有 Capgo WatchSDK 的相伴应用 .
• 机器人: 不支持(Apple Watch是只使用iOS). 方法返回适当的错误.
• 硬件: real Apple Watch 需要 - 模拟器不支持WatchConnective.

完成设置教学

这个教程会引导您在您的 Capacitor app 和 Apple Watch 之间设置双向交流. 每一步都要小心一点.

步骤1:安装插件

首先,将插件添加到您的 Capacitor 工程中 :

npm install @capgo/capacitor-watch
npx cap sync ios

然后以 Xcode 打开您的 iOS 项目 :

npx cap open ios

步骤2: 添加 iOS 应用程序能力

您的 iOS app 需要特定的能力与 Apple Watch 通信.

1. 选择您的 应用目标 xcode (不是项目) 中
2. 转到 签名能力( C) 选项卡
3. 点击 + 能力 按钮

4. 增加以下能力:
   • 背景模式 - 启用“背景获取”和“转发通知”
   • 推动通知 (需要为背景醒悟)

你的能力应该这样 当完成:

第3步:配置 AppDelegate.swift

[注] 现在这不会编译。 没关系,我们以后再修

import UIKit
import Capacitor
import WatchConnectivity
import CapgoWatchSDK

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Initialize WatchConnectivity session
        if WCSession.isSupported() {
            WCSession.default.delegate = CapWatchSessionDelegate.shared
            WCSession.default.activate()
        }
        return true
    }

    // ... rest of your AppDelegate code
}

步骤 4: 创建监视 App 目标

现在创建 WatchOS 同伴应用程序 :

1. 在 Xcode 中,转到 文件 > 新建 > 目标
2. 选择 监视系统 选项卡
3. 选择 应用 下一个

4. 配置手表应用程序 :
   • 产品名称:您的应用名(例如"MyApp Watch")
   • 套装标识符: 必须遵循模式 [your-app-bundle-id].watchkitapp
     • 示例:如果您的应用程序是 com.example.myapp,使用时 com.example.myapp.watchkitapp
   • 语言页:1
   • 用户界面缩写:SwiftUI

步骤5: 添加 Capgo WatchSDK 软件包

手表应用需要我们的SDK与电话通信. 添加为 Swift 包 :

1. 选择您的 项目 在导航器中(顶层,蓝色图标)
2. 转到 软件包依赖性 选项卡
3. 点击 + 键 按钮以添加软件包

4. 点击加号按钮添加软件包

5. 点击 添加软件包

6. 当提示时,选择 Capgo 监视系统 并把它加进你的 监视 App 目标 (不是主要应用)

添加后, 您的软件包依赖性应该显示 Capgo WatchSDK :

步骤6: 修复主应用程序的构建

现在,你的主要应用 丢失了Capgo WatchSDK。 我们需要把它添加到主应用程序.

1. 在导航器中选择您的工程( 顶级, 蓝色图标)
2. 转到您的 iOS 应用程序目标
3. 转到 general
4. 滚动至 Frameworks, Libraries, and Embedded Content
5. 单击加号按钮以添加框架

7. 点击 CapgoWatchSDK 框架和单击 Add

步骤6:配置监视应用程序

更新您的 Watch app 主文件以初始化连接 :

MyApp Watch/MyAppWatch App.swift: 页面存档备份,存于互联网档案馆

import SwiftUI
import WatchConnectivity
import CapgoWatchSDK

@main
struct MyAppWatchApp: App {
    init() {
        // Activate the watch connector
        WatchConnector.shared.activate()
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

MyApp Watch/ ContentView.swift: 页面存档备份,存于互联网档案馆 :

import SwiftUI
import CapgoWatchSDK

struct ContentView: View {
    @ObservedObject var connector = WatchConnector.shared

    var body: some View {
        VStack(spacing: 20) {
            // Connection status indicator
            HStack {
                Circle()
                    .fill(connector.isReachable ? Color.green : Color.red)
                    .frame(width: 12, height: 12)
                Text(connector.isReachable ? "Connected" : "Disconnected")
                    .font(.caption)
            }

            // Send message button
            Button("Send to Phone") {
                connector.sendMessage(["action": "buttonTapped", "timestamp": Date().timeIntervalSince1970]) { reply in
                    print("Phone replied: \(reply)")
                }
            }
            .disabled(!connector.isReachable)

            // Display received context
            if let context = connector.receivedContext {
                Text("Last update: \(context["status"] as? String ?? "none")")
                    .font(.caption2)
            }
        }
        .padding()
    }
}

你的表应用结构应该是这样的:

第7步: 添加监视辅助能力

Watch应用还需要背景能力:

1. 选择您的 监视 App 目标 xcode 编码
2. 转到 签名能力( C) 选项卡
3. 点击 + 能力
4. 添加 背景模式
5. 启用 远程通知

第8步: 使用您控制器 App 中的插件

现在在您的 Capacitor app 中设置 JavaScript 侧:

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

// Check watch connectivity status
async function checkWatchStatus() {
  const info = await Watch.getInfo();
  console.log('Watch supported:', info.isSupported);
  console.log('Watch paired:', info.isPaired);
  console.log('Watch app installed:', info.isWatchAppInstalled);
  console.log('Watch reachable:', info.isReachable);
}

// Listen for messages from watch
Watch.addListener('messageReceived', (event) => {
  console.log('Message from watch:', event.message);
  // Handle the message (e.g., event.message.action === 'buttonTapped')
});

// Listen for messages that need a reply
Watch.addListener('messageReceivedWithReply', async (event) => {
  console.log('Watch asking:', event.message);

  // Send reply back to watch
  await Watch.replyToMessage({
    callbackId: event.callbackId,
    data: { response: 'acknowledged', processed: true }
  });
});

// Listen for connection changes
Watch.addListener('reachabilityChanged', (event) => {
  console.log('Watch reachable:', event.isReachable);
  // Update UI to show connection status
});

// Send data to watch (latest value wins)
async function updateWatchContext(data: Record<string, unknown>) {
  await Watch.updateApplicationContext({ context: data });
}

// Send message to watch (requires watch to be reachable)
async function sendMessageToWatch(data: Record<string, unknown>) {
  await Watch.sendMessage({ data });
}

// Queue data for reliable delivery (even when watch is offline)
async function queueDataForWatch(data: Record<string, unknown>) {
  await Watch.transferUserInfo({ userInfo: data });
}

第9步:构建和运行

使用 Xcode 中的目标投放来切换您的手机或手表的建筑间:

构建顺序 :

1. 首先,建造和运行 iOS 应用程序 在您的 iPhone 上
2. 然后,建造和运行 监视 App 在您的苹果观察中

重要注释 :

• 您必须使用真实的设备 - 模拟器不支持 WatchConnectity
• 两个应用程序必须运行双向通信
• 手表应用程序将显示“ 断开连接, 直到手机应用程序激活

交流方法

选择合适的使用方法 :

示例:完整的通信流程

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

class WatchService {
  private isReachable = false;

  async initialize() {
    // Check initial status
    const info = await Watch.getInfo();
    this.isReachable = info.isReachable;

    // Monitor reachability
    Watch.addListener('reachabilityChanged', (event) => {
      this.isReachable = event.isReachable;
    });

    // Handle incoming messages
    Watch.addListener('messageReceived', (event) => {
      this.handleWatchMessage(event.message);
    });

    // Handle request/reply messages
    Watch.addListener('messageReceivedWithReply', async (event) => {
      const reply = await this.processWatchRequest(event.message);
      await Watch.replyToMessage({
        callbackId: event.callbackId,
        data: reply
      });
    });
  }

  async syncAppState(state: Record<string, unknown>) {
    // Always works - queues if watch is unreachable
    await Watch.updateApplicationContext({ context: state });
  }

  async sendInteractiveMessage(data: Record<string, unknown>) {
    if (!this.isReachable) {
      console.log('Watch not reachable, queueing message');
      await Watch.transferUserInfo({ userInfo: data });
      return;
    }
    await Watch.sendMessage({ data });
  }

  private handleWatchMessage(message: Record<string, unknown>) {
    // Process message from watch
    console.log('Watch action:', message.action);
  }

  private async processWatchRequest(message: Record<string, unknown>) {
    // Process and return reply
    return { status: 'ok', timestamp: Date.now() };
  }
}

SwiftUI 监视 App 示例

基本监视 UI

带有数据显示的高级监视应用程序

import SwiftUI
import CapgoWatchSDK

struct ContentView: View {
    @ObservedObject var connector = WatchConnector.shared
    @State private var lastMessage = "No messages yet"

    var body: some View {
        ScrollView {
            VStack(spacing: 16) {
                // Status header
                StatusView(isConnected: connector.isReachable)

                Divider()

                // Action buttons
                Button("Request Data") {
                    connector.sendMessage(["action": "requestData"]) { reply in
                        if let status = reply["status"] as? String {
                            lastMessage = "Got: \(status)"
                        }
                    }
                }
                .buttonStyle(.borderedProminent)
                .disabled(!connector.isReachable)

                Button("Send Tap") {
                    connector.sendMessage(["action": "tap", "time": Date().timeIntervalSince1970])
                }
                .disabled(!connector.isReachable)

                Divider()

                // Message display
                Text(lastMessage)
                    .font(.caption)
                    .foregroundColor(.secondary)
            }
            .padding()
        }
    }
}

struct StatusView: View {
    let isConnected: Bool

    var body: some View {
        HStack {
            Image(systemName: isConnected ? "iphone.radiowaves.left.and.right" : "iphone.slash")
                .foregroundColor(isConnected ? .green : .red)
            Text(isConnected ? "Phone Connected" : "Phone Disconnected")
                .font(.caption)
        }
    }
}

API 密码

• sendMessage(...)
• updateApplicationContext(...)
• transferUserInfo(...)
• replyToMessage(...)
• getInfo()
• getPluginVersion()
• addListener('messageReceived', ...)
• addListener('messageReceivedWithReply', ...)
• addListener('applicationContextReceived', ...)
• addListener('userInfoReceived', ...)
• addListener('reachabilityChanged', ...)
• addListener('activationStateChanged', ...)
• removeAllListeners()
• 接口
• 类型异名

为 Capacitor 监视 / 戴 OS 通讯插件 . 提供电话和一对手表之间的双向通讯.

• iOS系统:使用Apple WatchConnectivity框架与Apple Watch通信.
• 机器人:使用Google Wear OS Data Layer API(游戏服务-可穿戴)与一台Wear OS手表通信.
• 网页: 不支持; 所有方法抛出或返回安全默认值.

发送消息(...)

sendMessage(options: SendMessageOptions) => Promise<void>

向手表发送交互信息. 手表必须能够达到这一点才能取得成功. 用于时间敏感,互动的交流.

自: 8.0.0 (单位:千美元)

更新应用程序Context(...)

updateApplicationContext(options: UpdateContextOptions) => Promise<void>

更新与手表共享的应用程序上下文 . 只保留最近的上下文 - 这覆盖了任何先前的上下文 . 用于同步应用声明表需要显示 .

自: 8.0.0 (单位:千美元)

传输用户信息(...)

transferUserInfo(options: TransferUserInfoOptions) => Promise<void>

将用户信息传输到手表 . 传输被排队并按顺序交付,即使表目前无法到达. 用于必须可靠交付的重要数据.

自: 8.0.0 (单位:千美元)

回复Message(...)

replyToMessage(options: ReplyMessageOptions) => Promise<void>

答复表上要求答复的信息. 使用此选项来响应信件 Reply 事件 .

自: 8.0.0 (单位:千美元)

获取信息 ()

getInfo() => Promise<WatchInfo>

获取手表连接状态信息.

回返情况: Promise<WatchInfo>

自: 8.0.0 (单位:千美元)

获取 PluginVersion ()

getPluginVersion() => Promise<{ version: string; }>

获取本地 Capacitor 插件版本 .

回返情况: Promise<{ version: string; }>

自: 8.0.0 (单位:千美元)

添加Listener( 消息收到",...)

addListener(eventName: 'messageReceived', listenerFunc: (event: MessageReceivedEvent) => void) => Promise<PluginListenerHandle>

听从表收到的消息.

回返情况: Promise<PluginListenerHandle>

自: 8.0.0 (单位:千美元)

添加 listener( 以 Reply 方式收到消息),..

addListener(eventName: 'messageReceivedWithReply', listenerFunc: (event: MessageReceivedWithReplyEvent) => void) => Promise<PluginListenerHandle>

听从表里需要回复的信息.

回返情况: Promise<PluginListenerHandle>

自: 8.0.0 (单位:千美元)

添加聆听器( “ 应用程序已接收 ” ,...)

addListener(eventName: 'applicationContextReceived', listenerFunc: (event: ContextReceivedEvent) => void) => Promise<PluginListenerHandle>

从手表中聆听应用程序上下文更新 .

回返情况: Promise<PluginListenerHandle>

自: 8.0.0 (单位:千美元)

添加 listener('userInfoeived',...)

addListener(eventName: 'userInfoReceived', listenerFunc: (event: UserInfoReceivedEvent) => void) => Promise<PluginListenerHandle>

听从手表的用户信息传输.

回返情况: Promise<PluginListenerHandle>

自: 8.0.0 (单位:千美元)

添加倾听器( “ 可获取性改变 ” ,...)

addListener(eventName: 'reachabilityChanged', listenerFunc: (event: ReachabilityChangedEvent) => void) => Promise<PluginListenerHandle>

听看表的可达性变化.

回返情况: Promise<PluginListenerHandle>

自: 8.0.0 (单位:千美元)

添加倾听器( “ 激活状态改变 ” ,...)

addListener(eventName: 'activationStateChanged', listenerFunc: (event: ActivationStateChangedEvent) => void) => Promise<PluginListenerHandle>

听听会话激活状态变化 .

回返情况: Promise<PluginListenerHandle>

自: 8.0.0 (单位:千美元)

删除所有收听器( )

removeAllListeners() => Promise<void>

删除此插件的所有听众 .

自: 8.0.0 (单位:千美元)

接口

发送信件选项

发送信件到手表的选项 .

更新文本选项

更新应用程序上下文的选项.

传输用户信息选项

传输用户信息选项 .

回信选项

对手表中的消息进行回复的选项 .

监视信息

关于Watch/Wear OS连接状态的信息.

插件听筒

信件收到事件

收到信息的事件数据.

信件以回信方式收到

需要回复的信息的事件数据.

收到的活动

用于应用程序上下文更新的事件数据 .

用户信息接收事件

用户信息传输事件数据.

可达到性 更改事件

可达到性变化的事件数据.

激活 变相事件

激活状态变化的事件数据 .

类型异名

监视MessageData

可以在iPhone和Apple Watch之间发送的数据. 数值必须是可序列的(字符串、数字、布尔、数组或嵌入对象).

Record<string, unknown>

记录

构造 T 类型 K 的一组属性类型

{ [P in K]: T; }

贷项

基于加强的WatchConnectity执行: 观测增强。 。 。 . 谁是叉子 电容监视器