跳转至正文

适用于拥有 Web 应用的团队

将您的 Web 应用转化为 iOS 和 Android 应用

使用 Capacitor 封装您现有的 Web build,通过 Capgo Build 构建签名二进制文件,并发布至 App Store 和 Google Play。上线后,可通过 Live Update 实时推送 Web 端变更。您的 Web code 始终是唯一代码源。

适用于 Web、iOS 和 Android
一套代码
典型 Native Build 耗时
2–3 分钟
发布后修改 Web 内容
Live Updates
npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
npx cap init "Your App" com.company.app --web-dir dist
npx cap add ios && npx cap add android
npx @capgo/cli@latest init
npx @capgo/cli@latest build request --platform ios

您的 Web 应用

React、Vue、Angular、Svelte 或任何可构建为静态文件的技术栈

您持续更新的商店应用

云端构建原生 iOS 和 Android 项目,通过 OTA 更新

问题

团队每天发布 Web 端,移动端却带来新工作。

响应式网站不等于应用商店 App

应用商店上架、推送通知和设备 API,都需要在 Web code 外再套一层原生 App 外壳。

原生工具链对 Web 团队很陌生

Xcode、Android Studio、签名证书、keystore 和应用商店记录,都是团队以前没做过的工作。

两种发布速度

Web 应用合并代码就能发布。应用商店 App 每次变更都要等审核,通常 24–48 小时,有时更久。

开始之前

Web 应用先检查什么

大多数 Web 应用只需少量改动就能在 Capacitor 中运行。以下三项检查可及早发现常见问题。

静态构建产物

Capacitor 从单个文件夹(webDir)加载构建后的文件。Vite、Angular 和 Vue 默认就会生成这种输出。Next.js 则需要静态导出。

使用 Capacitor 的 Next.js

路由与登录重定向

请确保客户端路由、OAuth 重定向和链接在 App 内都能正常工作,而不只是在您的域名下。

Web 应用转 Capacitor 指南

您需要的设备功能

列出哪些功能需要原生插件:推送通知、相机、文件、生物识别或应用内购买。

Capacitor 插件

解决方案

Capacitor 与 Capgo 的职责

Capacitor 为您的 Web App 提供原生壳层。Capgo 负责构建、发布至应用商店并保持更新。

Capacitor 封装你的 Web 构建

Capacitor 会将构建好的 Web 应用放入原生 iOS 和 Android 项目。插件让 JavaScript 可以调用设备功能。

Capacitor 插件

Capgo Build 编译并签名

在 CLI 中发起 iOS 和 Android 构建。iOS 构建在云端 Mac 上运行,团队里没人需要自备 Mac。一次典型构建只需 2–3 分钟。

Capgo Build 文档

上传到应用商店

已签名的构建会上传到 App Store Connect 和 Google Play。首次发布和每次原生变更仍需经过商店审核。

Capgo Build 文档

上线后的 Live Updates

无需发布新的商店版本,即可向已安装的应用推送 JavaScript、HTML、CSS 和资源变更。先在 staging channel 上测试。

Channels 文档

工作原理

Web 团队如何通过 Capgo 发布移动应用

从现有 Web 应用走向应用商店构建和 Live Updates。Capacitor 命令来自 Capacitor CLI,Capgo 命令来自 Capgo CLI 文档。

  1. 将 Capacitor 添加到你的 Web App

    安装 Capacitor,设置应用名称、Bundle ID 和构建输出目录,然后添加 iOS 和 Android 项目。

    npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
    npx cap init "Your App" com.company.app --web-dir dist
    npx cap add ios
    npx cap add android
    Web 应用转 Capacitor 指南
  2. 将应用连接到 Capgo

    Onboarding 会将你的应用添加到 Capgo,创建生产 Channel,安装 updater 插件,并带你完成首次测试更新。

    npx @capgo/cli@latest init
    CLI onboarding 指南
  3. 在云端构建已签名的 App

    签名只需配置一次,之后即可发起 iOS 和 Android 构建。签名后的构建会上传到 App Store Connect 和 Google Play 进行审核。

    npm run build && npx cap sync
    npx @capgo/cli@latest build init
    npx @capgo/cli@latest build request --platform ios
    npx @capgo/cli@latest build request --platform android
    Capgo Build 文档
  4. 通过 Live Update 实时发布 Web 端变更

    用户安装应用后,只需将新的 Web build 上传至 channel 即可。Native 层的变更仍需重新进行 Native Build。

    npm run build
    npx @capgo/cli@latest bundle upload --channel production
    发布更新

可选:AI 编程助手

给你的编程助手一份移动端发布简报

如果你使用 AI 编程助手,请粘贴这份简报。它会在任何人运行原生工具之前检查应用,并生成包含配置、插件需求和待办任务的交接文件。

AI 移动端发布简报

You are preparing this existing web app to become an installable iOS and Android app.
Do not assume you can run local tooling. If this environment cannot create native projects or run local tools, create a clean handoff document instead.

Inspect the app and return:

1. The framework, package manager, production build process, and build output folder.
2. Whether the app can be exported or committed to a real Git repository.
3. The app name, bundle ID or package ID suggestion, app icon and splash-screen source, and any missing brand assets.
4. Auth, redirect, deep-link, storage, camera, push, payment, geolocation, file, or notification features that need native plugin planning.
5. Routing, environment variables, API URLs, and asset assumptions that could break inside a native WebView.
6. A proposed Capacitor configuration, including appId, appName, webDir, and required plugins, without inventing secrets.
7. A release-channel plan: production, staging, preview, and rollback expectations for web-layer updates.
8. A list of tasks that must happen outside this environment, such as Apple signing, Android keystore setup, native sync, store records, and signed builds.
9. A docs/mobile-release-handoff.md file with the exact checklist, open questions, and files that a developer or build service should handle next.
10. A short summary of what you changed, what you could not do in this environment, and the next human action.

使用 Capacitor 构建的应用

同时上架应用商店的 Web 产品

已在 Web 端运行的产品可以将相同的 code 用 Capacitor 封装,发布到 App Store 和 Google Play,并继续以 Live Updates 形式发布 Web 层改进。

Poll Everywhere 应用图标 商务

Poll Everywhere

一款在 Web 端和手机端使用的受众投票产品,演讲者和参与者都希望流程保持一致。

Google Play 安装量
110 万
应用商店评分
3.2
Freelancer: Hire & Find Jobs App 图标 商务

Freelancer:招聘与求职

拥有大型 Web 产品的市场平台,其招聘、消息和账户页面也会在应用商店 App 中提供。

Google Play 安装量
890 万
应用商店评分
4.1
TV SPIELFILM - TV 节目单 App 图标 娱乐

TV SPIELFILM - 电视节目表

一家电视节目单服务商,网站访问量很大,应用商店里的 App 展示相同的节目指南和编辑内容。

Google Play 安装量
1210 万
应用商店评分
4.4

客户证言

使用 Capgo 交付的团队怎么说

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

sikafanka

设计,圆角半径 5

“Capgo Build 帮我们简化了 Capacitor 应用的发布流程。通过一套清晰的工作流,我们就能构建并发布 iOS 和 Android 应用。”

Kapil

NuTriQ 创始人

“无需等待完整的 App Store 审核周期,就能即时推送生产环境的 OTA 更新,这为我们带来了巨大的运营优势。”

Luis Dominguez 的肖像

Luis Dominguez

谁付钱,谁说了算

“自从开始使用 Capgo,一切都更快了,我也能在不耽误日常生活的情况下,把用户应得的时间留给他们。”

常见问题

Web 团队常见问题

为把现有 Web 应用上架 App Store 和 Google Play 的团队提供简短解答。

我们需要重写 Web 应用吗?

不需要。Capacitor 可以在原生 iOS 和 Android 项目中运行您现有的 Web build。您只需在需要设备功能时添加插件,即可让 Web 和移动端共用一套 codebase。

Web 应用转 Capacitor 指南

支持 Next.js 吗?

支持,但需要使用静态导出。Capacitor 会从你的 build 输出目录加载文件,因此请设置 output: 'export' 并将 webDir 指向导出的文件夹。Vite、Angular 和 Vue 默认都会生成静态输出。

使用 Capacitor 的 Next.js

iOS 构建需要 Mac 吗?

不需要。Capgo Build 会在云端 Mac 机器上运行 iOS 构建,并将签名后的 build 上传到 App Store Connect。你仍然需要一个 Apple Developer 账号。

Capgo Build 文档

不发布应用商店版本,我们可以更改哪些内容?

JavaScript、HTML、CSS 和资源文件可以通过 Live Update 发布。但如果需要添加 plugin、更改权限或更新 Capacitor,则需要重新做一次 store build。

Live update 还是 Native Build?

可以从现有的 CI 发布移动端更新吗?

可以。在 GitHub Actions、GitLab CI 或任何 pipeline 完成 web build 后运行 bundle upload;当 native code 发生变化时,直接从同一个 pipeline 请求 Native Build 即可。

CI/CD 集成

把您的 Web App 上架到应用商店

开启 14 天免费试用,用 Capacitor 封装您的应用,并在 CLI 中申请您的首个 iOS 和 Android 构建。 选择带 14 天退款保证的方案,用 Capacitor 封装您的应用,并在 CLI 中申请您的首个 iOS 和 Android 构建。