This guide explains how to wrap an existing PWA or web page into an Android app using Capacitor, with a 'live shell' configuration that allows frontend changes without repackaging.

Stars

18

7-day growth

No data

Forks

0

Open issues

0

License

MIT

Last updated

2026-07-28

AI repository intelligence
FR-AI / ANALYSIS

Why it is worth attention

It solves the pain of frequent repackaging by enabling the native shell to load the app from a remote URL, and includes a detailed walkthrough for optional native push notifications.

Who it is for

  • Developers with an existing PWA who want a native Android app
  • Personal app creators who dislike repetitive packaging
  • Command-line users without Android development experience
  • Owners of apps needing full-screen push notifications (e.g., incoming calls)

Use cases

  • Turn a web-based tool into a standalone Android app
  • Iterate on frontend features rapidly without reinstalling the app
  • Add lock-screen push notifications to a web app
  • Create a private Android app from a simple web service

Strengths

  • No Android development knowledge or account required for basic packaging
  • Frontend changes instantly reflected via live URL configuration
  • All tools (JDK, Android SDK, Capacitor) are free and open source
  • Includes practical caveats and troubleshooting for common pitfalls

Considerations

  • App requires internet on first launch and has no offline functionality
  • HTTPS with a valid certificate is mandatory; self-signed certs cause blank screens
  • Full native push notifications need a Google account and Firebase project

README quick start

PWA → 安卓 App

把一个已经在跑的 PWA(或任何前端网页)打包成能装在安卓手机上的 App。

核心:改前端不用重新打包安装。


这篇讲什么

你已经有一个网页版应用,跑在自己的服务器上,手机浏览器能打开。现在你想要它变成桌面上一个真正的图标——点开就是全屏的 App,没有浏览器地址栏。

这篇讲怎么做到,以及怎么做到之后日常改动不用重新打包

最后一节是可选的:怎么做锁屏全屏来电那种原生推送——这是壳子唯一真正比网页多出来的能力。

不讲:怎么从零写一个 PWA、iOS 打包、上架应用商店。

前置要求:会用命令行。不需要懂安卓开发,不需要开发者账号,不需要实名认证。


一、最重要的一件事:让壳子"活着"

先说这个,因为它决定了后面所有事的体验。

Capacitor 默认会把你的前端构建产物(dist 目录)打包死在 apk 里。这意味着:以后改一个按钮的颜色,你都要重新构建、重新签名、重新传到手机、重新安装一遍。

大部分人做私人 App 会死在这一步。不是技术难,是烦到最后不想改了。

破解方法是一行配置——让原生壳子去线上读页面:

// capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourname.app',
  appName: '你的应用名',
  webDir: 'dist',
  server: {
    url: 'https://your-domain.com/',   // ← 关键:壳子去线上读
    cleartext: false,
    errorPath: 'offline.html'          // ← 服务器连不上时的兜底页,这个是打包在本地的
  }
};

export default config;

配完之后的分工变成这样:

改什么要不要重新打包装机
前端 UI、功能、bug 修复不用。构建 + 重启服务,手机上下拉刷新就有
后端接口不用
App 图标、应用名、原生权限、原生插件

代价要说清楚,别被这个方案骗了:

  • 离线打不开。 所以 errorPath 那个兜底页必须配,否则断网就是一片白屏。
  • 首屏依赖网络。 服务器慢,开屏就慢。
  • server.url 必须是 HTTPS 且证书有效,否则壳子直接白屏,而且不会告诉你为什么。自签证书也不行——浏览器会弹警告让你点"继续",壳子里没有那个按钮。

对私人应用来说这笔买卖非常划算:一次打包,之后前端随便改。


二、环境准备(一次性)

三样,全部免费,不需要注册任何账号(想做原生推送的话需要一个 Google 账号,见第八节,可选):

1. JDK 21

注意版本。Capacitor 8 的 capacitor-android 模块要求 Java 21,用 JDK 17 会在构建时报 invalid source release: 21。Capacitor 6/7 用 17 即可——这是版本升级带来的变化,大部分现存教程还停在 17。

sudo apt install openjdk-21-jdk

2. Android SDK

不需要装完整的 Android Studio(那玩意几个 G,还要图形界面)。命令行工具就够:

下载 commandline-tools,解压后:

export ANDROID_HOME=$HOME/android-sdk
sdkmanager "platform-tools" "platforms;android-34" "build-tools;34.0.0"

ANDROID_HOME 写进 ~/.bashrc,省得每次导。

3. 签名钥匙(keystore)

自己生成,不经任何审核:

keytool -genkey -v -keystore my-app.keystore \
  -alias myapp -keyalg RSA -keysize 2048 -validity 10000

会问你密码和一堆信息(姓名、组织、城市),随便填,但密码要记住并且备份

这把钥匙丢了的后果:以后打的包签名对不上,用户(也就是你自己)必须卸载重装才能升级,App 里的本地数据全部丢失。备份它,跟备份密码一样认真。


三、套壳

npm install @capacitor/core @capacitor/cli @capacitor/android
npx cap init "你的应用名" "com.yourname.app" --web-dir=dist
npx cap add android

然后写 capacitor.config.ts(见第一节),再:

npm run build      # 构建前端,产出 dist/
npx cap sync android

`cap s

Description

把已有的 PWA 打包成安卓 App,改前端不用重新打包安装。

Related repositories

Similar projects matched by category, topics, and programming language.

MoonshotAI
Featured
MoonshotAI GitHub avatar

Kimi-K3

Kimi K3 is an open-weight, 2.8T-parameter native multimodal agentic model with a 1M-token context window, designed for frontier coding, knowledge work, and reasoning tasks.

AI & Machine LearningAI Agents
3,348
xuchonglang
Featured
xuchonglang GitHub avatar

investing-for-beginners

A structured investing guide for Chinese beginners covering US stocks, options, and cryptocurrency, with focus on foundational concepts and risk awareness.

Blockchain & Web3
2,739
Krishnagangwal
Featured
Krishnagangwal GitHub avatar

CS-Fundamentals

A curated collection of Computer Science fundamentals (PDFs, notes, cheatsheets, interview question banks) for placement preparation, covering seven core subjects plus general resources.

Data & DatabasesDatabases & Storage
2,326