跳转至正文
PR 预览

在真机上预览每个 Pull Request

您的 CI 会将每个 Pull Request 的 Web build 上传到专属的 Capgo channel。审核人员只需扫描 QR code 或在 App 中切换 channel 即可在设备上进行测试，且 channel 会在 PR 关闭时自动删除。若涉及 native code 的更改，仍需重新进行 Native Build。

  • 每个 Pull Request 对应一个 Channel
  • QR code 预览
  • PR 关闭时自动清理

问题

Web 端代码变更不应需要重新审核二进制文件

通过应用商店测试版本进行 PR 审核

  1. 开发者提交 PR

    代码已准备好进行审核，但目前还无法在真机上进行测试。

  2. 构建、签名并上传

    有人需要为该分支构建 Native Build，进行签名，上传至 TestFlight 或 Play 测试轨道，然后等待处理。

  3. 邀请并安装

    审核人员需要被添加为测试员，并安装对应的构建版本。

  4. 每个修复都要重复上述流程

    针对 code 的每一条修改意见，都意味着一次新的构建、上传和安装。

即使只是修改了 JavaScript，每一轮审核仍需等待 Native Build。

这给团队带来的成本

每次 build

等待商店处理

你上传到 TestFlight 或 Play 测试轨道的每次 build，在测试人员安装前都需要经过处理。每个 build 都会经历这个过程。

每个 PR

都需要单独的 Native Build 进行测试

如果没有 Live Update，即使只是 Web 端的改动，审核人员也必须等待有人完成构建、签名并上传新的二进制文件后才能进行测试。

反馈滞后

审核时开发者已转向其他任务

当审核需要等待 build 时，反馈会延迟到达，导致开发者已在处理其他任务，且该分支也逐渐偏离了 main 分支。

工作原理

团队如何使用 Capgo 预览 Pull Request

四个 CI 步骤：一次性设置 scoped key，每次 push 时 upload，分享预览，关闭时清理。以下所有命令均来自 Capgo 文档。

  1. 创建 App Preview 密钥并启用预览

    管理员为 CI 创建一个 App Preview API 密钥。它可以创建预览 channel 并 upload bundles，但无法更改您的默认或生产 channel。每个 App 仅限开启一次预览功能。

    # once, run by an admin (not the preview key)
npx @capgo/cli@latest app set com.example.app --preview
    App Preview API 密钥

  2. 将 PR 构建上传至专属 channel

    每次 push 时，CI 会构建 Web App 并以唯一的 bundle 版本进行 upload。如果不存在，bundle upload --channel 会自动创建 pr-<number> channel 并将 bundle 与之关联。

    npx @capgo/cli@latest bundle upload com.example.app \
  --apikey "$CAPGO_PREVIEW_KEY" \
  --path ./dist \
  --channel "pr-$PR_NUMBER" \
  --bundle "1.2.3-pr.$PR_NUMBER.$GITHUB_RUN_NUMBER"
    在 channels 文档中查看 PR 预览

  3. 将预览信息发布到 PR

    get-qr 会为该 channel 打印 QR code，或通过 --url 获取预览 URL，以便 CI 将其添加到 PR comment 中。

    npx @capgo/cli@latest get-qr com.example.app \
  --channel "pr-$PR_NUMBER" \
  --apikey "$CAPGO_PREVIEW_KEY" \
  --url
    get-qr 参考文档

  4. 在 PR 关闭时删除 channel

    在 pull request closed 事件中运行此操作。使用 App Preview 密钥时，它只会删除该密钥创建的 channel 及关联的 bundle。

    npx @capgo/cli@latest channel delete \
  "pr-$PR_NUMBER" com.example.app \
  --apikey "$CAPGO_PREVIEW_KEY" \
  --delete-bundle \
  --success-if-not-found
    channel CLI 参考

测试人员切换至 PR channel 的其他方式

两者都需要支持自助分配的 channel。App Preview key 无法设置此项，因此使用该 key 时，请分享 QR 预览或在控制台中设置设备覆盖。

摇一摇菜单

在内部构建中开启摇一摇菜单。测试人员摇晃设备即可打开 Capgo 的测试菜单，摇一摇频道选择器则让他们选择频道。

// capacitor.config.ts (internal builds)
CapacitorUpdater: {
  shakeMenu: true,
}

应用内切换器

在开发者设置页面添加一个频道字段，并用 PR 频道名称调用 setChannel()。

import { CapacitorUpdater } from '@capgo/capacitor-updater'

await CapacitorUpdater.setChannel({
  channel: 'pr-123',
  triggerAutoUpdate: true,
})
setChannel() 参考

谁在使用 PR 预览

任何评审 Pull Request 的人都能在手机上查看，而不只是作者。

QA 工程师

  • 在自己的设备上测试 PR 的 Web 构建
  • 无需重新安装 App 即可在 PR 频道间切换
  • 频道名称与 PR 编号一致，这样你就知道正在运行哪个 code

项目经理

  • 在代码合并前先在手机上体验新功能
  • 扫描 PR 中 code 提供的二维码
  • 直接在 PR 上留下反馈

开发者

  • 在 PR 开启期间即可获取设备反馈
  • 每次 push 都会更新 PR channel
  • 仅 JavaScript 变更无需 Native Build

存储测试构建 vs Capgo PR channels

  • 将 PR 部署到手机

    TestFlight / Play 测试
    Native Build、签名及应用商店审核
    Capgo PR channel
    Web build 及通过 CI 进行 bundle upload

  • 切换 PR

    TestFlight / Play 测试
    安装另一个 build
    Capgo PR channel
    扫描另一个 QR code 或切换 channel

  • Reviewer 设置

    TestFlight / Play 测试
    发送 Tester 邀请，然后安装每个 build
    Capgo PR channel
    仅需安装一次 App

  • Native code 与 plugin 变更

    TestFlight / Play 测试
    是
    Capgo PR channel
    不，需要 Native Build

按团队类型筛选方案

寻找符合您团队需求的解决方案

企业版

支持多应用、多团队部署

初创公司

快速交付，告别繁琐流程

独立开发者

14 天免费试用，支持 CLI upload

代理机构

管理多个客户端应用

使用 Capacitor 构建的应用

产品应用需要可预览的移动端变更

学习、活动及社区类应用可以同时对 onboarding、练习、直播课程和订阅变更进行审核。通过 PR previews，产品、QA 和支持团队可以在合并代码前检查移动端就绪的 build。

StudySmarter - 学校与大学应用图标 教育

StudySmarter - 学校与大学

课程、课件及订阅变更需经利益相关者审核的教育类 App。

Google Play 安装量
650万
应用商店评分
4.8
Poll Everywhere App 图标 商业

Poll Everywhere

活动流程需在合并前进行测试的实时互动类 App。

Google Play 安装量
1.1M
应用商店评分
3.2
lichess • 免费在线国际象棋应用图标 游戏棋盘

lichess • 免费在线国际象棋

社区应用，其锦标赛和分析界面通过设备预览功能获得更好的开发体验。

Google Play 安装量
11.3M
应用商店评分
4.3

客户证言

使用 Capgo 交付的团队怎么说

5.0/5 开发者团队评分 9,400+ 团队 查看评价

Nate van Jole

CTO, 私有

“搭建过程不到一天。基于 Channel 的发布机制让我能在推送到生产环境之前，先在自己的设备上进行测试。”

Michael Haberler 肖像

Michael Haberler

nethead emeritors

“updater plugin 做得太棒了。对我来说运行非常完美，Live Update 极大地缩短了快速测试的周期。”

no-tone @ Webincode

开发者，Webincode

&ldquo;能把特定 Device ID 加入指定分组，并只向这些分组推送更改，太救命了。&rdquo;

常见问题

团队关于 PR previews 的常见问题

为 CI 配置人员和代码评审人员提供直截了当的解答。

评审人员需要为每个 PR 进行新的 build 吗？

如果 PR 只改动了 Web 层，则不需要。评审人员只需安装一次 App，每个 PR 的 JavaScript、HTML、CSS 和 assets 都会推送到各自独立的 channel。如果 PR 添加了 plugin 或更改了原生 code，则需要进行 Native Build。可以在 CI 中运行 build 检查来检测此类变更。

哪些情况需要 Native Build

CI key 可以触及我们的生产环境 channel 吗？

使用 App Preview API key 则不会。它只能创建 preview channels、upload bundles，并且只能删除由其创建的 channel 和 bundle。它无法更改默认或主 channel。在 GitHub Actions 中，请在 pull_request 事件而非 pull_request_target 上运行 job，并将其限制在来自同一仓库的 PR。

App Preview API 密钥

评审人员如何打开预览？

管理员只需运行一次 app set --preview 即可启用预览。之后，get-qr 会为该 PR channel 打印一个 QR code，而 --url 会打印 Web 预览 URL 和 deep link。直接将它们发布在 PR comment 中即可。

get-qr 参考文档

旧的 PR channels 和 bundles 会怎样处理？

可以在 pull request closed 事件中添加一个 job，运行带有 --delete-bundle 和 --success-if-not-found 参数的 channel delete 命令。使用 App Preview key，这会同时移除该 channel 及其关联的 bundle。对于早期 push 产生的 bundles，可以使用具有 delete 权限的 key 通过 bundle cleanup 进行清理。

CLI channel 引用

它支持 GitLab、Bitbucket 或 Azure DevOps 吗？

支持。由于步骤均为 Capgo CLI 命令，因此可以在任何 CI 中运行。文档中提供了 GitHub Actions、GitLab CI、Bitbucket Pipelines 和 Azure DevOps 的集成指南。

CI/CD 集成

在手机上预览您的下一个 Pull Request

在免费试用期间，将 upload、QR 和 cleanup 步骤添加到您的 CI 中，并在自己的 App 上进行测试。

14 天免费试用，无需信用卡。Native 变更仍需重新进行 Native Build。