一键把正在做的事搬到另一台设备上，用户真的感知不到缝？”——UIAbility 迁移 / 多端协同架构与 UX 全链路实战！

兰瓶Coding

1075人浏览 · 2025-11-12 10:09:07

兰瓶Coding · 2025-11-12 10:09:07 发布

我是兰瓶Coding，一枚刚踏入鸿蒙领域的转型小白，原是移动开发中级，如下是我学习笔记《零基础学鸿蒙》，若对你所有帮助，还请不吝啬的给个大大的赞~

前言

直说吧：跨端“迁移与协同”要做得丝滑，是在和“状态”这头猛兽正面刚。你既要让用户无感换屏（手机看菜谱→厨房屏继续；手表暂停音乐→客厅音箱续播），还得让多端同屏协作不打架（两个人同时改同一份文档/同一个灯光场景）。这篇我把迁移前置条件、状态打包与恢复、并发冲突的仲裁策略、多设备角色分工、失败回滚/断点续传一口气讲明白，附ArkTS/TypeScript 级别的示例代码与UX 细节清单。不搞玄学，能落地。

目录（拿去当评审大纲也不亏）

概念速写：迁移 vs 协同，别混着聊
架构蓝图：端–端直连 + 协调服务的“双通道”
迁移前置条件：谁能迁、啥时候迁、迁到哪
状态打包与恢复：从 UIAbility 抽取“可重放”快照
并发端冲突：单活 / 多活、锁 / 版本 / CRDT 的取舍
协同的角色分工：主控 / 从控 / 观察者
失败回滚 & 断点续传：别让用户背锅
端到端时序：从“发起迁移”到“首帧可交互”
体验设计要点：可见、可控、可撤销
测试与观测：怎么量“无感”？怎么复现“翻车”？
参考实现（节选代码）：可复用的迁移契约 & 协同协调器

一、概念速写：迁移 vs 协同

迁移（Transfer/Migration）：同一会话换载体。用户在设备 A 的 UIAbility 状态，切到设备 B 持续同一任务。核心是状态“打包→传输→恢复→切流”。
协同（Collaboration）：多端并行参与同一任务。可有主次（主持屏 / 控制屏 / 显示屏），强调一致性与冲突处理。

记忆点：迁移追求“无缝单活”；协同追求“多活一致”。

二、架构蓝图：端–端直连 + 协调服务的“双通道”

┌────────┐       P2P(局域/直连, 首选)        ┌────────┐
│ 设备A  │◀──────────────────────────────────▶│ 设备B  │
│ Source │                                     │ Target │
└────┬───┘                                     └───┬────┘
     │                备份/打捞/仲裁               │
     ▼                                            ▼
          ┌────────────────────────────────┐
          │   协调服务（Cloud/Edge）        │
          │ - 会话注册/发现/鉴权            │
          │ - 状态仓（短期快照/增量日志）    │
          │ - 锁/租约/版本仲裁               │
          │ - 失败回滚/断点续传              │
          └────────────────────────────────┘

首选端端直连：延迟最低（同网/蓝牙/软总线）。
云/边协同兜底：注册发现、鉴权、冲突仲裁、断点续传。
双写：迁移期间 A 与 B 短暂双活，待 B 完成“可交互首帧”→切主→A 退场。

三、迁移前置条件（Preflight Checklist）

能力互通：目标设备 支持同 UIAbility 或兼容能力（分辨率、输入法、权限）。
账号与权限：同一用户/家庭空间；加密通道已建（会话密钥/证书）。
网络可达：优先局域直连；不可达则走协调服务中转。
资源可用：目标设备存储/内存/传感器可用；若缺失，给降级策略（只读/替代控件）。
状态可序列化：源端可导出快照（不可序列化对象要能替代）。
并发策略已选：迁移瞬间写入如何处置（冻结/队列/版本化）。

没通过预检？不发起迁移，把“不支持原因”明确给用户（屏幕不适配、无网络、权限不足…）。

四、状态打包与恢复：把 UIAbility 变成“可重放”应用

4.1 迁移契约（MigrationContract）

// common/migration.ts
export interface MigrationSnapshot {
  schema: string;          // 版本号，如 "com.app.recipe@2"
  route: string;           // 当前 UI 路由/页面ID
  focusPath?: string[];    // 焦点链/组件定位
  state: unknown;          // 可序列化状态
  resources?: ResourceRefs;// 图片等引用（可选，转为URI/哈希）
  ts: number;              // 时间戳
  checksum: string;        // 完整性校验
}

export interface MigratableUI {
  pack(): Promise<MigrationSnapshot>;
  restore(s: MigrationSnapshot): Promise<void>;
  warmup?(hint: WarmupHint): Promise<void>; // 预热资源（目标端）
}

4.2 在 UIAbility 中实现 `pack/restore`

// abilities/CookAbility.ets（节选）
import { CRC32 } from './lib/crc32'
import { getCurrentRoute, serializeState, deserializeState } from './lib/state'

export default class CookAbility /* extends UIAbility */ implements MigratableUI {
  // 收口：统一管理“能被重放的状态”
  private collectState() {
    return {
      recipeId: store.recipe.id,
      stepIndex: store.stepIndex,
      timers: store.timers.map(t => ({remain: t.remainMs, name: t.name})),
      uiFlags: { dark: theme.dark, zoom: ui.zoom }
    }
  }

  async pack(): Promise<MigrationSnapshot> {
    const state = this.collectState()
    const payload = JSON.stringify(state)
    const shot: MigrationSnapshot = {
      schema: 'com.home.cook@2',
      route: getCurrentRoute(),
      focusPath: focusTracker.path(),
      state: payload,
      resources: await refCollector.collect(), // 资源改成可解析引用
      ts: Date.now(),
      checksum: CRC32(payload)
    }
    return shot
  }

  async restore(s: MigrationSnapshot) {
    versionGate.ensure('com.home.cook@2', s.schema) // 版本兼容校验
    // 先路由，再状态，还原焦点
    router.navigate(s.route)
    const state = JSON.parse(String(s.state))
    await deserializeState(state, store) // 精准落到可观察对象
    focusTracker.restore(s.focusPath)
    theme.dark = state.uiFlags.dark; ui.zoom = state.uiFlags.zoom
  }
}

4.3 增量日志（Optional）

对“长会话/大状态”，快照之外追加操作日志（op log）：[{op:'set', path:'stepIndex', value:3, ts}]；恢复时先快照，再按时间重放补齐到最新。

五、并发端冲突：锁？版本？还是 CRDT？

选择题关键看一致性需求与交互时延：

场景	策略	说明
单人迁移（A→B）	短租约 + 再切主	迁移期间 A 获得写租约，B 预热为“只读”；B首帧就绪后 B 获新租约，A释放。延迟极小。
双端协同编辑（低冲突）	版本号 + 乐观合并	每次提交携带 `version`，服务端 `version+1` 成功；冲突返回 `409`，客户端重放/提示合并。
高频微操作（文本/画板）	CRDT（如 RGA/WOOT/Automerge）	去中心或弱中心，多端乱序也能最终一致，代价是元数据开销。
家居控制（幂等动作）	幂等等价 + 最后写赢 + 保护间隔	开关/亮度这类，允许最后写赢，但同 key 设置抖动窗口避免闪烁。

示例：版本 + 租约

// 协调服务（伪码）
POST /session/{sid}/lease
→ { holder: deviceId, ttlMs, version }

PATCH /session/{sid}/state
headers: { 'If-Match-Version': version }
body: { patch, ts }
→ 200 { version: version+1 } | 409 { serverVersion, serverPatch }

六、协同的多设备角色分工

主持屏（Host/Presenter）：主可视/主写入；负责节奏（下一页/播放/提交）。
控制屏（Controller）：有限写入（如遥控条、工具面板）。
显示屏（Viewer）：只读大屏（投屏/扩展屏）。
隐形角色：协调器（Cloud/Edge），不渲染 UI，只做会话/锁/日志。

UX 要点：角色明确可见（Host 标识）；可转让（主持权移交）；可约束（控制屏能力边界可配置）。

七、失败回滚 & 断点续传：别让用户背锅

7.1 失败矩阵

失败点	典型原因	自动处理	用户可见反馈
连接失败	无网/局域不可达	回落到云中转；或延迟重试 N 次	顶部轻提示“网络不佳，正在改用云连接”
快照不兼容	版本不匹配	走降级映射（schema adapter）	“目标端版本较旧，部分布局降级显示”
资源缺失	权限/磁盘不足	只恢复核心态；缺失资源标红可重试	“相册权限缺失，点击授权后继续恢复”
切主失败	B 首帧超时	保留 A 为主，B 自动回收	“目标设备响应超时，本设备继续”
协同冲突	并发写	版本冲突对话框/自动合并	弹窗选择“以我为准 / 以对方为准 / 查看差异”

7.2 断点续传

快照/资源按 chunk 上传（带偏移/哈希）；中断后续从已确认偏移继续。
幂等 ID：迁移 ID 全链路透传，重复请求不重复执行。

八、端到端时序：从“发起迁移”到“首帧可交互”

关键 SLA：快照传输 + 预热 + 首帧 ≤ 300–800ms（同网）；云中转 1–2s 可接受但要明显提示。

九、体验设计要点（UX，不止是“能用”）

可见：迁移的三步可视化（准备→传输→就绪），可取消。
可控：迁移前告知将迁去的设备名/位置；协同时有主持权显著标识。
可撤销：迁过去 10 秒内提供“一键回到原设备”。
可降级：目标端不支持某控件，显示替代控件（如手表显示简化遥控）。
手感：切主瞬间的动效与音频连续（音乐不中断，视频跨设备无黑屏）。

十、测试与观测：怎么量“无感”

合成指标：T_pack（打包）、T_transfer（传输）、T_restore（恢复）、T_firstInteractive（首帧可交互）。
弱网回放：50/100/200ms 延迟、1%/3% 丢包、带宽限速 1–5Mbps。
并发猴测：双端 1–5Hz 随机操作，随机时刻触发迁移，看一致性。
观测：打点 + 分布式追踪（sid + migrateId + deviceId）串起来；冲突/回滚要有面包屑。

十一、参考实现（节选代码）：迁移契约 & 协同协调器

11.1 迁移入口（UIAbility 内）

// abilities/MigrateAction.ets
async function migrateTo(targetDeviceId: string) {
  try {
    ui.toast('Preparing…')
    const lease = await coord.acquireLease(sid) // 写租约
    const shot = await currentAbility.pack()

    // 优先直连
    const ch = await connectP2P(targetDeviceId).catch(() => null) ?? await coord.openRelay(targetDeviceId)
    await ch.send({ type:'snapshot', data: shot })

    // 等待目标端 Ready
    const ok = await coord.waitReady(sid, 1500)
    if (!ok) throw new Error('Target not ready')

    // 冲洗尾日志
    const delta = opLog.tailSince(shot.ts)
    await ch.send({ type:'delta', data: delta })

    // 切主
    await coord.cutover(sid)
    ui.toast('Moved to target ✅')
    await gracefullyCloseHere()
  } catch (e) {
    ui.alert('Migration failed', String(e?.message ?? e))
    // 自动回滚：继续留在本机
  }
}

11.2 目标端接收与恢复

// abilities/TargetBootstrap.ets
channel.on('snapshot', async (msg) => {
  const s = msg.data as MigrationSnapshot
  await prefetch.resources(s.resources)
  await currentAbility.warmup?.({ route: s.route })
  await currentAbility.restore(s)
  await coord.reportReady(sid)
})

channel.on('delta', async (msg) => {
  await applyDelta(msg.data)
  renderTick() // 确保首帧可交互
})

11.3 协同协调器（极简版）

// cloud/coord.ts (Fastify 伪码)
POST /lease -> grant {holder, ttlMs, version}
POST /ready -> mark ready
POST /cutover -> revoke old lease, assign new, bump version
WS /relay -> data tunnel (if no P2P)

11.4 冲突处理（乐观锁）

// client submit
await http.patch('/state', patch, { headers: { 'If-Match-Version': v }})
// server
if (req.version !== store.version) return 409
store.apply(patch); store.version++

十二、落地清单（工程向）

统一迁移契约：全员实现 pack/restore/warmup，禁止在 build() 里做恢复副作用。
版本门：schema 变更必须有 adapter 或拒绝迁移的降级。
双通道：直连优先，云中转兜底；断点续传必做。
锁与版本：迁移用短租约，协同用版本/CRDT视场景选型。
观测：为每次迁移生成 migrateId，日志全链路串起。
灰度开关：按设备/版本/地域逐步放量，观察 P95 时延与失败率。
UX 三件套：进度可视、可撤销、失败可理解。

结语

迁移的难点在“把 UIAbility 变得可重放”；协同的难点在“让多端不吵架”。只要你把状态契约、锁/版本策略、失败兜底三件事抠到位，“无感换屏”和“多端协作”真的能做到理所当然。下次有人说“跨端就是玄学”，你可以摊手：“玄学不玄，关键是打包、租约和首帧。” 😎

…

(未完待续)