快速导航至主要内容

适合团队的Web应用

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

将您的Web应用包装在Capacitor中,使用Capgo Build生成签名的二进制文件,并将其发布到App Store和Google Play。启动后,通过实时更新将Web更改部署。您的Webcode始终是源代码。

来自马丁的专业支持

适用于Web、iOS和Android
一个代码库
典型的原生构建
2–3 分钟
发布后 web 变更
实时更新
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 项目,通过无线网络更新

问题

您的团队每天都部署 web 应用。移动端增加了新的工作。

响应式网站不是应用商店

Store presence, push notifications, and device APIs need a native app shell around your web code.

web 团队的原生工具链是新鲜的

Xcode、Android Studio、签名证书、密钥库和商店记录是您团队之前没有完成的工作。

两种发布速度

您的Web应用程序在您合并时即可发布。商店应用程序需要在每次更改后等待审查,通常需要24-48小时,有时更长。

开始之前

在您的Web应用程序中首先检查什么

大多数Web应用程序在Capacitor中工作,需要很少的修改。这些三个检查可以在早期捕捉到常见的问题。

静态构建输出

Capacitor从一个文件夹(webDir)中加载您的构建文件。Vite、Angular和Vue默认情况下会产生此输出。Next.js需要静态导出。

Next.js与Capacitor

路由和登录重定向

检查客户端路由、OAuth重定向和链接在应用程序内是否工作,而不仅仅是在您的域名内。

Web应用程序到Capacitor指南

您需要的设备功能

以下需要原生插件:推送通知、摄像头、文件、生物识别或内购。

Capacitor 插件

解决方案

什么Capacitor和Capgo处理

Capacitor给您的web应用提供原生外壳。Capgo构建它,发送它到应用商店,并保持它更新。

Capacitor.wrap您的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 构建文档

发布后实时更新

在发布后将JavaScript、HTML、CSS和资产更改发送到已安装的应用程序,无需新发布商店。首先在测试环境中测试。

__CAPGO_KEEP_0__ 通道文档

如何工作

如何将 web 团队的 web 应用程序转换为 Capgo

从现有的 web 应用程序到商店构建和实时更新。 Capacitor 命令来自 Capacitor CLI, Capgo 命令来自 Capgo CLI 文档。

  1. 将 Capacitor 添加到您的 web 应用程序

    安装 Capacitor,设置应用程序名称、包 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

    Capgo onboarding会将您的应用添加到Capgo,创建生产渠道,安装更新插件,并引导您完成首次测试更新。

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

    设置签名一次,然后请求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. 将网页变化作为实时更新

    在用户安装商店应用后,上传每个新网页构建到一个渠道。原生变化仍然需要一个新的商店构建。

    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 产品和商店应用

产品已经在网上运行的产品可以将相同的code打包在Capacitor中,发布到App Store和Google Play,并将网层改进作为实时更新。

Poll Everywhere 应用程序图标 BUSINESS

Poll Everywhere

网上和手机上使用的观众投票产品,演讲者和参与者期望相同的流程。

Google Play安装
1.1百万
应用商店评分
3.2
自由职业者:雇佣和找到工作app icon BUSINESS

自由职业者:招聘 & 找工作

市场平台有一个大型网络产品,其中招聘、消息和账户屏幕也在商店应用中发布。

Google Play 安装
8.9万
商店评分
4.1
电视节目 - 电影节目应用图标 娱乐

电视节目 - 电视节目

电视节目指南服务有一个繁忙的网站和一个商店应用,显示同样的指南和编辑内容。

Google Play 安装
12.1亿
应用商店评分
4.4

客户证明

使用Capgo的团队的评价

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

sikafanka

设计,半径5

“Capgo Build帮助我们简化了Capacitor应用程序发布流程。我们可以从一个清晰的工作流程中构建和部署iOS和Android应用程序。”

Kapil

创始人,NuTriQ

“能够立即推送生产OTA更新,无需等待完整App Store审查周期,这对我们来说是一个巨大的运营优势。”

路易斯·多明格斯的肖像

路易斯·多明格斯

支付者,Anirol

“自从我开始使用Capgo,一切都变得更快,我可以为我的用户提供他们应有的时间,而不必忽视我的日常生活。”

常见问题

开发团队常问的问题

回答团队问题

对现有Web应用进行移动化的团队需要回答的问题简短答案

No. Capacitor 在原有 Web 构建中运行 iOS 和 Android 项目。您在需要设备功能的地方添加插件,并且只需维护一个 Web 和移动的代码库。

Web 应用到 Capacitor 指南

是否支持 Next.js?

是的,使用静态导出。 Capacitor 从您的构建输出目录加载文件,因此设置输出:'export',并将 webDir 指向已导出的文件夹。Vite、Angular 和 Vue 默认生成静态输出。

Next.js 与 Capacitor

是否需要 Mac 进行 iOS 构建?

不。 Capgo Build 在云 Mac 机器上运行 iOS 构建,并将签名的构建上传到 App Store Connect。您仍然需要 Apple Developer 账户。

Capgo Build 文档

是否可以在现有的 CI 中推送移动更新?

在 Capacitor 或原生构建中进行选择

Live update 或原生构建?

__CAPGO_KEEP_0__ 或原生构建?

是的。 在 GitHub Actions、GitLab CI 或任何管道中运行 bundle 上传后,在您的 web 构建中,并从同一管道中请求 native 构建,当 native code 变更时。

CI/CD 集成

将您的 web 应用程序发布到商店

开始 14 天的免费试用,包装您的应用程序在 Capacitor 中,并从 CLI 请求您的第一个 iOS 和 Android 构建。

来自马丁的人性化支持