简介
您已经有一个渐进式Web应用程序。它在浏览器中工作，有一个清单，可能使用服务工作器来支持离线支持。如果您现在需要在应用商店中分发应用程序、使用本机设备API或改进的引导流程，迁移到Capacitor应用程序通常比重写前端更快。
最大的优势是您保留了几乎所有现有的Webcode。在大多数情况下，您只需进行以下操作：
- 构建生产Web资产
- 初始化 Capacitor 以正确的方式
webDir, - 添加 iOS 和 Android 项目，
- 并仅在需要时连接本机插件。
如果您的 PWA 有清洁的路由和组件逻辑，这可能只需要几小时。
先决条件
估计时间: 2-5 小时，取决于平台特定的功能。
- Node.js 18+ 版本 Bun
- 您的现有 PWA 源代码 code (React、Vue、Angular、Svelte 等)
- Xcode (仅限 iOS, macOS)
- Android Studio (仅限 Android)
- 如果您打算发布 iOS 应用程序，则需要 Apple Developer 账户
- 如果您打算发布 Android 应用程序，则需要 Google Play Developer 账户
步骤 1：检查您的 PWA 以便将其打包为本机应用程序
在运行之前 bunx cap init请确认您的 Web 应用程序已准备好发布:
- 确保您的 PWA 有一个生产构建脚本（例如
bun run build). - 确认您的 Web 输出文件夹是确定性的（通常是
dist,build, 或out). - 删除假设浏览器上下文的硬编码绝对重定向
- 验证服务工作人员行为与移动Web视图兼容:
- 如果有助于您的用户，请保留离线支持。
- 避免仅在浏览器中可用的API，无法在嵌入式Web视图中使用。
- 确认PWA安装提示和浏览器特定用户界面仍然合理。在一个Capacitor应用中，通常不需要安装应用提示。
步骤2：适应Web-only行为
保留您的应用UI，但在浏览器逻辑中添加门控。
使用一个简单的平台检查来安装和推送提示:
import { Capacitor } from '@capacitor/core'
const isNative = Capacitor.isNativePlatform()
function registerInstallPrompt() {
if (isNative) return
// existing browser-only install or Web Push code
}这避免了浏览器逻辑在本机容器中触发。
步骤3：在PWA文件夹中初始化Capacitor
从您的现有PWA根目录:
bun add @capacitor/core
bun add -D @capacitor/cli运行Capacitor init，使用您的应用名称、包ID和Web输出目录:
bunx cap init MyPWAApp com.example.my-pwa-app --web-dir dist如果您的构建文件夹是 build ((Create React App) 或者) out ((Next.js 静态导出), 替换) dist.
添加一个基本的 Capacitor 配置:
import type { CapacitorConfig } from '@capacitor/cli'
const config: CapacitorConfig = {
appId: 'com.example.my-pwa-app',
appName: 'MyPWAApp',
webDir: 'dist',
server: {
iosScheme: 'https',
},
}
export default config步骤 4: 添加本机平台
安装核心本机包并生成项目文件夹:
bun add @capacitor/ios @capacitor/android
bunx cap add ios
bunx cap add android到目前为止 Capacitor 已创建 ios/ 和 android/ 文件夹。 同步会将构建的 Web 资产复制到两个平台。
步骤 5: 构建您的 Web 应用并同步
构建 PWA 并同步 Web 资产:
bun run build
bunx cap sync现在打开本机项目:
bunx cap open ios
bunx cap open android从 Xcode 或 Android Studio 中，连接设备或模拟器并运行。
第 6 步：在迁移后进行本机增强
这是您将 Web-only 功能替换为本机 API 的地方，根据需要:
- 推送通知 ->
@capacitor/push-notifications - 安全的键值存储 ->
@capacitor/preferences - 相机/媒体 ->
@capacitor/camera - 生物识别认证 ->
@capacitor-community/native-biometric(或选择的插件)
对于每个新本机插件:
- 安装插件包
- 配置插件特定的设置
- 运行：
bunx cap sync然后重建并再次运行。
第 7 步：应用商店平衡性检查
提交前:
- 在两种平台上测试深度链接和路由（包括深度路由）
/验证状态栏、安全区域和方向正确 - 移除未使用的网页仅元数据，可能与应用行为冲突（例如，安装提示）
- 保持应用传输安全和隐私设置与您的政策一致
- 为每个平台添加应用图标/启动页资源
- 如果您的应用使用 OTA 更新，请将发布管道与原生安全更新策略配对，并考虑
__CAPGO_KEEP_0__ Capgo 最终检查清单
__CAPGO_KEEP_0__
- Web app 构建干净（
bun run build) - Capacitor 使用正确的
webDir bunx cap add ios并bunx cap add android完成- 本机应用程序在真实设备上运行
- 仅浏览器code路径被阻止
- 更新频道和应用商店资产已配置
您已经完成了大部分工作，当您构建PWA时。将其包装在Capacitor中，给您：
- 商店分发
- 对本机API的访问
- 不需要完全code重写的更快迭代
- Web和移动团队的单个部署路径
从这个流程开始，然后根据分析和用户反馈逐一迭代native应用。
继续使用Capacitor将PWA转换为本机应用。
如果您正在使用 Transform Your PWA to a Native App with Capacitor 如果您正在使用 Capgo企业 连接到Capgo企业 __CAPGO_KEEP_0__企业 ionic企业插件替代品 Capgo Alternatives Capgo替代品 Capgo替代品 为Capgo产品工作流程 Capgo高级支持 为Capgo高级支持
