跳过主要内容
Capgo logo
教程

将每个Pull Request转换为可安装的预览

停止等待TestFlight处理。Capgo PR预览让QA、PM和利益相关者在一分钟内在真实设备上测试功能。

马丁·多纳迪

马丁·多纳迪

内容营销人员
将每个Pull Request转换为可安装的预览

每个移动开发团队都曾经感受到的痛苦：一个功能已经准备好审查，但将其推入利益相关者的手中意味着要穿越TestFlight或Google Play beta review迷宫。什么应该花费几分钟却变成了等待、安装和管理beta版本的几个小时。

如果您的生产应用程序可以直接从任何pull请求中拉取最新的更改，并将其推送到设备上，而无需重新安装或应用商店延迟?

这就是 PR预览 的作用。开发人员打开pull请求时，GitHub动作会创建一个专用的更新通道并发布更改。安装了该应用程序的任何人都可以切换到该通道，测试功能并切换回原来的应用程序——所有这一切都在不离开他们已经拥有的应用程序的情况下完成。

TestFlight问题

传统的测试移动功能的工作流程大致如下:

  1. 开发人员打开PR - Code已准备就绪
  2. 等待TestFlight - 15-30分钟的处理时间
  3. 找到并安装 - 测试人员寻找正确的构建
  4. 测试和重复 - 每次改变意味着另一次等待

这会造成瓶颈。 QA 等待构建而被阻塞。产品经理无法快速验证功能。开发人员在等待反馈时会失去上下文。行业估计这会导致每个 PR 的生产力损失约 $340。

PR 预览的工作原理

PR 预览使用 Capgo 的通道系统来创建每个 PR 的更新流。以下是流程：

  1. PR 打开或更新 - GitHub 动作触发
  2. 打包上传 - 您的 JS/CSS 更改将发送到 PR 特有的通道
  3. 评论发布 - 测试人员在 PR 中获得指示
  4. 即刻测试 - 切换频道，测试，切换回原频道

无新应用安装。无 TestFlight 延迟。同一生产应用可以从不同更新频道拉取。

设置 PR 预览

在实现 PR 预览之前，您的项目需要配置 Capgo 实时更新。请遵循 Capgo 快速入门指南 如果您尚未完成。

GitHub Actions 工作流

创建 .github/workflows/pr-preview.yml:

name: PR Preview
on:
  pull_request:
    types: [opened, synchronize]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6

      - name: Setup Bun
        uses: oven-sh/setup-bun@v2

      - name: Install Dependencies
        run: bun install

      - name: Build
        run: bun run build

      # Create a channel named after your PR (may already exist on synchronize)
      - name: Create PR Channel
        id: create_channel
        continue-on-error: true
        run: bunx @capgo/cli@latest channel add pr-${{ github.event.pull_request.number }} --self-assign
        env:
          CAPGO_TOKEN: ${{ secrets.CAPGO_TOKEN }}

      # Upload the build to that channel
      - name: Upload to Capgo
        run: bunx @capgo/cli@latest bundle upload --channel pr-${{ github.event.pull_request.number }}
        env:
          CAPGO_TOKEN: ${{ secrets.CAPGO_TOKEN }}

      # Post a comment with testing instructions (only on PR open)
      - name: Comment on PR
        if: github.event.action == 'opened'
        uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: ${{ github.event.pull_request.number }},
              body: '📱 **Test this PR on device:**\n\nOpen your app and switch to channel: `pr-${{ github.event.pull_request.number }}`\n\nUse the shake menu or call `setChannel()` from your app.'
            })

关键是 --self-assign 标志，当创建频道时启用。这样测试者就可以从应用内部使用 setChannel() API

设置 Capgo token

  1. 前往你的 Capgo 控制台
  2. 导航到设置 > API 密钥
  3. 使用 all 权限
  4. 添加它作为 CAPGO_TOKEN 在你的 GitHub 仓库密钥中

测试人员切换频道的方法

测试人员有两种方式切换到 PR 频道:

选项 1: Shake 菜单 (最简单的)

在你的 Capacitor 配置中启用 Shake 菜单和频道选择器:

// capacitor.config.ts
const config: CapacitorConfig = {
  // ... your other config
  plugins: {
    CapacitorUpdater: {
      shakeMenu: true,
      allowShakeChannelSelector: true
    }
  }
};

测试人员摇晃他们的设备以打开调试菜单，菜单中显示可用的通道列表，带有搜索栏。他们找到他们的PR通道（例如，__CAPGO_KEEP_0__），点击选择它，应用程序自动下载并应用更新。当测试完成后，他们再次摇晃，切换回生产环境。 pr-123测试人员只需摇晃设备，shake menu就会自动处理整个流程：

自动获取所有可自行分配的通道：

  1. 显示通道列表，带有搜索栏，方便找到特定的PR listChannels()
  2. 下载选定的更新
  3. 提示重新加载，提供“立即重新加载”/“稍后”选项
  4. 选项2：自定义通道选择器UI

在应用程序中构建一个通道切换器，列出可用的PR通道，让测试人员选择一个。这使用了两个关键API：

- 获取所有启用自行分配的通道

  • listChannels() - 将设备切换到选定的通道
  • setChannel() 使用这些基本组件，您可以创建一个简单的UI：
import { CapacitorUpdater } from '@capgo/capacitor-updater';

// Get all available channels (including PR channels)
async function getAvailableChannels() {
  const { channels } = await CapacitorUpdater.listChannels();

  // Filter to show only PR channels
  const prChannels = channels.filter(c => c.name.startsWith('pr-'));

  return prChannels;
}

// Switch to a specific PR channel
async function switchToChannel(channelName: string) {
  await CapacitorUpdater.setChannel({
    channel: channelName,
    triggerAutoUpdate: true  // Immediately check for updates
  });
}

// Return to production
async function switchBackToProduction() {
  await CapacitorUpdater.unsetChannel({});
}

// Get current channel
async function getCurrentChannel() {
  const { channel } = await CapacitorUpdater.getChannel();
  return channel;
}

测试人员摇晃他们的设备以打开调试菜单，菜单中显示可用的通道列表，带有搜索栏。他们找到他们的PR通道（例如，__CAPGO_KEEP_0__），点击选择它，应用程序自动下载并应用更新。当测试完成后，他们再次摇晃，切换回生产环境。

// Example: List PR channels and let user select
const channels = await getAvailableChannels();
const current = await getCurrentChannel();

// Display channels in your UI
channels.forEach(channel => {
  console.log(`${channel.name} ${channel.name === current ? '(current)' : ''}`);
});

// When user selects a channel
await switchToChannel('pr-123');

For a complete React component example, see __CAPGO_KEEP_0__. 我们的频道浏览文章.

清理 PR 通道

当一个 PR 被合并或关闭时，您需要清理频道。添加另一个工作流程：

name: Cleanup PR Preview
on:
  pull_request:
    types: [closed]

jobs:
  cleanup:
    runs-on: ubuntu-latest
    steps:
      - name: Delete PR Channel
        run: bunx @capgo/cli@latest channel delete pr-${{ github.event.pull_request.number }}
        env:
          CAPGO_TOKEN: ${{ secrets.CAPGO_TOKEN }}

当 PR 被关闭时，这会移除频道，保持你的频道列表清洁。

版本兼容性

PR 预览仅在 JavaScript 包与安装的原生版本兼容时才有效。如果您的 PR 包含原生 code 变更（新 Capacitor 插件，iOS/Android 修改），测试者将需要一个新的原生构建。

Capgo自动检查版本兼容性。如果一个PR的打包文件针对的本机版本与已安装的版本不同，更新就不会被应用。这可以防止由于不兼容的code导致的崩溃。

对于需要原生变更的 PR，您需要发布一个新的 TestFlight/Play Store 版本。 PR 预览对于 JavaScript、CSS 和不涉及原生 code 的资产变更效果最佳。

谁能从 PR 预览中受益

测试工程师

  • 当 PR 打开时，立即测试特性
  • 不再需要重新安装
  • 验证修复和回归在真实设备上
  • 不再需要等待TestFlight处理

产品经理

  • 在合并之前查看功能
  • 直接在PR上给出反馈
  • 验证实现与要求相符
  • 减少审查周期时间

开发者

  • 对更改的速度更快的反馈
  • 演示功能给利益相关者
  • 调试与特定用户相关的问题
  • 节省时间管理 beta 版本

比较:传统版 vs PR 预览

方面 TestFlight/ Beta Capgo PR 预览
构建时间 15-30 分钟 小于 1 分钟
切换 PR 5+ 分钟重新安装 10 秒
设置复杂度 App Store凭据 一个工作流文件
清理 手动 自动
本机code更改 必需 (仅限JS)可选

最佳实践

  1. 明确命名频道: 使用 pr-{number} 命名约定以便识别
  2. 自动清理: PR 关闭时始终删除频道
  3. 限制访问: 只在 debug/staging 构建中启用 shake 菜单
  4. 文档化流程: 将测试指南添加到您的 PR 模板
  5. 优雅地处理失败: 在发布评论之前检查频道创建是否成功

何时不应使用 PR 预览

PR 预览适用于 JavaScript/CSS 变更。如果您的 PR 包含:

  • 新 Capacitor 插件
  • iOS 原生 code 变更
  • Android native code 变更
  • 影响原生构建的依赖项更新

您需要传统的 TestFlight/Play Store 分发来实现这些变更。

与 Channel Surfing 结合

PR 预览在与 channel surfing结合时效果最佳：

  • production - 对所有用户提供稳定版本
  • beta - 对已同意的用户提供早期访问
  • pr-123 - 对特定 PR 提供功能预览

生产环境中的测试者可以切换到任何 PR 通道，测试功能，然后切回 - 使用相同的安装应用程序

资源

结论

PR 预览将如何改变您的团队审查和测试移动功能。

The setup is minimal - one GitHub Actions workflow file - and the benefits compound across your team. QA stays unblocked, product managers review faster, and developers get quicker feedback.

设置很简单 - 仅需一个 __CAPGO_KEEP_0__ Actions 工作流文件 - 且好处会在您的团队中累积。

QA 不会被阻塞，产品经理可以更快地审查，开发人员可以更快地获得反馈。

从一个仓库开始添加工作流程，看到它如何改变您的审查流程。 继续从 Turn Every Pull Request Into an Installable Preview 中学习。 规划渠道路由和分阶段发布,连接 渠道 渠道 渠道 渠道 Beta 测试解决方案 为 Beta 测试解决方案中的产品工作流程,并 版本目标解决方案 为版本目标解决方案中的产品工作流程,并 由 Capgo

实时更新 Capacitor 应用

当 web 层 bug 活跃时，通过 Capgo 发布修复而不是等待几天的应用商店审批。用户在后台接收更新，而本机更改保持在正常审批路径中。

立即开始

最新博客文章

Capgo 为您提供创建真正专业的移动应用所需的最佳见解。

Capacitor 应用中的双向通信
开发 移动 +1
2025 年 4 月 26 日

Capacitor 应用中的双向通信

5种避免OTA更新的常见错误
开发 安全 +1
2025年4月13日

5种避免OTA更新的常见错误

移动应用程序实时更新的5种安全最佳实践
开发 移动 +1
2025年1月14日

移动应用程序实时更新的5种安全最佳实践

查看所有博客文章