Skip to main content
@capgo/capacitor-watch Device APIs Open source

Watch Capacitor plugin

Apple Watch and Wear OS communication with bidirectional messaging between phone and watch apps

Install

bun add @capgo/capacitor-watch bunx cap sync
npm, pnpm or yarn
  • npm install @capgo/capacitor-watch
  • pnpm add @capgo/capacitor-watch
  • yarn add @capgo/capacitor-watch

Guide

How to use Watch in Capacitor

Using @capgo/capacitor-watch

Apple Watch communication plugin for Capacitor. Provides bidirectional messaging between iPhone and Apple Watch using WatchConnectivity.

Install

bun add @capgo/capacitor-watch
bunx cap sync

What This Plugin Exposes

  • sendMessage - Send an interactive message to the watch. The watch must be reachable for this to succeed. Use this for time-sensitive, interactive communication.
  • updateApplicationContext - Update the application context shared with the watch. Only the latest context is kept - this overwrites any previous context. Use this for syncing app state that the watch needs to display.
  • transferUserInfo - Transfer user info to the watch. Transfers are queued and delivered in order, even if the watch is not currently reachable. Use this for important data that must be delivered reliably.
  • replyToMessage - Reply to a message from the watch that requested a reply. Use this in response to the messageReceivedWithReply event.

Example Usage

sendMessage

Send an interactive message to the watch. The watch must be reachable for this to succeed. Use this for time-sensitive, interactive communication.

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

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

updateApplicationContext

Update the application context shared with the watch. Only the latest context is kept - this overwrites any previous context. Use this for syncing app state that the watch needs to display.

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

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

transferUserInfo

Transfer user info to the watch. Transfers are queued and delivered in order, even if the watch is not currently reachable. Use this for important data that must be delivered reliably.

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

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

replyToMessage

Reply to a message from the watch that requested a reply. Use this in response to the messageReceivedWithReply event.

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 }
  });
});

Full Reference

Keep going from Using @capgo/capacitor-watch

If you are using Using @capgo/capacitor-watch to plan native plugin work, connect it with @capgo/capacitor-watch for the implementation detail in @capgo/capacitor-watch, Getting Started for the implementation detail in Getting Started, Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, and Adding or Updating Plugins for the implementation detail in Adding or Updating Plugins.

FAQ

Watch plugin FAQ

How do I install the Watch plugin in a Capacitor app?

Run "bun add @capgo/capacitor-watch" (or "npm install @capgo/capacitor-watch"), then run "bunx cap sync" so the iOS and Android projects pick up the native code. Import it from "@capgo/capacitor-watch" in your app code.

Does @capgo/capacitor-watch work with React, Vue and Angular?

Yes. Watch is a Capacitor package, so it works with any web framework that runs inside Capacitor, including Ionic, React, Vue, Angular, Svelte and plain JavaScript.

Which Capacitor version does @capgo/capacitor-watch support?

Capgo plugins follow Capacitor's major version: use the plugin major version that matches your Capacitor major version (for example plugin v8 with Capacitor 8). The compatibility table in the GitHub README lists the maintained versions.

Is @capgo/capacitor-watch free and open source?

Yes. The source code is public on GitHub at https://github.com/Cap-go/capacitor-watch/ and the package is free to install from npm. Bug reports and pull requests are welcome.

Can I update code that uses Watch without an App Store review?

Installing or upgrading the plugin changes native code, so it needs a new store build. After that, JavaScript, HTML and CSS changes that call the plugin can ship instantly with Capgo live updates.

Ship Watch changes without waiting for app review

Once the plugin is in your store build, Capgo live updates push your JavaScript, HTML and CSS changes to users in minutes.

Start with Capgo